4

ユーザーがシリアルコードを送信するためのフォームを HTML で作成したいと考えています。次のようになります。

XX-XX-XX-XX-XX-XX

しかし、ユーザーが「-」を手動で入力することは望ましくありません。

考えられる解決策は 2 つあります。

  1. 私の最初の計画は、セクションごとに複数の < input > を作成し、タブ インデックスを追加することですが、Android には 6 つの < input > をスクロールするための TAB のような機能がないため、携帯電話のユーザーにはまだ難しすぎます。つまり、非常に小さな入力ボックスをタップする必要があり、グリッチのあるキーボードが上下に飛び出すのを経験する必要があります。

  2. テキストボックスをJavascriptで制御するようにして、チェックボックスにチェックを入れて「-」でコードを自動分割するようにしました。しかし、あなたが持っていると想像してください

01-02-03-09-05-06

「09」を変更したい場合、ユーザーが「9」を削除すると、グリッチが発生し、次のようになります。

01-02-03-00-50-6

私の意見では、これは十分ではありません。ユーザーにとって完璧なものにしたい。

では、専門家はどのようにそれを行うのですか？プラン 1 のカーソルが 1 つの < 入力 > から次の入力に自動的にジャンプできる可能性はありますか?

4

2 に答える 2

3

この種の入力用の素晴らしい jquery プラグインがあります。

http://digitalbush.com/projects/masked-input-plugin/

コード：

まず、jQuery とマスクされた入力 JavaScript ファイルを含めます。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

次に、マスクしたい項目に対して mask 関数を呼び出します。

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

必要に応じて、アンダースコア ('_') 文字をプレースホルダーとして使用することに満足できない場合は、オプションの引数を maskedinput メソッドに渡すことができます。

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

必要に応じて、マスクが完了した後に関数を実行したい場合は、その関数を maskedinput メソッドへのオプションの引数として指定できます。

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

等々...

于 2013-08-08T08:09:16.793 に答える