矢印を使用してナビゲーションを作成しました。 いっぱいになると、フォーカスが次の入力に切り替わるようにしました。 しかし、クリップボードから正しいペーストを作成することに成功しませんでした。
maxlength
属性にマージンを設定することにより、バッファからの挿入を実装できます。 都市コードの場合、その値は少なくとも電話番号の長さ、つまり3ではなく10でなければなりません。
問題は、数字の間に偶数を挿入することでさえありませんでした。 しかし、キーボードのボタンを押したままにしなかった場合、動作は非常に奇妙であることが判明しました：最初に1つの入力が
maxlength
全体で満たされ、その後、ユーザーがキーを押し、数字が残りの入力に分配されるという事実のためにちらつきを受け取ります。
ちなみに、それは2008年で、私が見た唯一の機会は
setTimeout
介してすべてをプログラムすることでした。 開発時間と不満足な結果を予想して、この形式を組み合わせて、今日まで変わらずに残った形式にしました。
年が過ぎました。 ブラウザは
oninput
イベントを実装し
oninput
た。 コミュニティはIEで
onpropertychange
イベントを
onpropertychange
ました。 そして、私の前に、すでにオストロフカで、私はクリップボードからクレジットカード番号の挿入を実現すると同時に、その有効性の分野で仕事をしなければなりませんでした。
これは、全体として問題を解決するためのサインでした。 蓄積された経験と数十の単体テストで、フィールドの入力がユーザーにとって最も自然な他のイベントの組み合わせを見つけることができました。
jQuery Group Inputs-入力をグループ化するためのプラグインに会います。
入力は、共通のデータがあるかのように動作し始めます。
-場所が終わると、キャリッジが移動します
-左/右ボタンは、キャリッジを次/前の入力に移動します
-テキストを挿入すると、入力ごとにテキストが散らばります。挿入後、カーソルは1つの入力のようになります。
使用例：
<script src="jquery-1.7.2.js"></script> <script src="jquery.groupinputs.js"></script> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <script> $('.group1').groupinputs(); </script>
GitHubリポジトリ 。
デモ
投稿者： lusever