テキストボックスを3つのエリアに分割

テキストボックスを3つのエリアに分割したい：例えば、値を951-05-8765456のように表示したい。 3つの場所の後にデフォルトで " - "を表示する方法はありますか？ユーザーが値を入力すると自動的に分割されます。画像のようにテキストボックスを表示したい Splitted Text Box テキストボックスを3つのエリアに分割

出典

2013-12-17 BlackPOP

をGUI devのでは、これらがマスクされた入力として知られています。ここにjQueryプラグインがあります - http://digitalbush.com/projects/masked-input-plugin/ – Prasanth

このプラグインを使用できますhttp://igorescobar.github.io/jQuery-Mask-Plugin/ – Satpal

あなたはこのjQueryプラグインを使用することができますので、基本的には、唯一のCSSで行うことができない、あなたは簡単にそれを行います。

Mask Plugin

あなたは次のようにあなたのテキストボックスのためにこのプラグインを使用することができます。

$(".TEXT_BOX_CLASS").mask("9999/99999/99999");

出典

2013-12-17 11:34:47 Parixit

Prasanthは既にコメントとしてこのリンクを投稿しています – Satpal

@Satpal私は既にそのプラグインを使っていたので、私はちょうど答えとして投稿しました.Cssだけを使用する別の方法はありません。 – Parixit

3つのテキストが必要ですmaxlength属性が4/5/5のようなCSSを持つボックスを使用し、cssを使用して、ボトムボーダーを除くテキストボックスの境界線を削除することができます。

<input type="text" maxlength="4" class="Split" tabindex="1">/ 
<input type="text" maxlength="5" class="Split" tabindex="2">/ 
<input type="text" maxlength="5" class="Split" tabindex="3">

CSS：

.Split{ 
    border:none; 
    border-bottom: 1px solid black; 
    width:50px; 
}

デモ：http://jsfiddle.net/juN9t/1/

出典

2013-12-17 11:32:37

これは正解ではありませんバディ...代わりに彼はajaxを利用します –

JQueryをこれに使うことができます。したがって、1つの入力フィールドは '.split（）'と '.join（）'メソッドで使用できます。 – AfromanJ

@Rony、私はHTMLとCSSを使ってOPの結果を得ました。 –

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <style type="text/css"> 

    </style> 
</head> 
<body> 
<input type="text" class="mynum" value="" /> 

<script type="text/javascript"> 


    $('.mynum').keydown(function() { 
     var value = $('.mynum').val(); 
     var len = value.length;   
     if (len == 4) 
      value += '/'; 
     if (len == 10) 
      value += '/'; 
     if (len == 16) 
      return false; 
     $('.mynum').val(value); 
    }); 



</script> 

</body> 
</html>

出典

2013-12-17 11:43:48

テキストボックスを3つのエリアに分割

答えて

関連する問題