2

input文字列または各ボックスに 1 つの文字を「スピルオーバー」方式で格納する文字列を入力できるテキスト ボックスをユーザーにいくつか提示したいと思います。各ボックスは、1 文字に制限された入力テキスト タイプです。

ここに画像の説明を入力

たとえば、上の画像は 3 つの入力ボックスを示しています (単語の最初の文字を表示する最初のボックスは数えないでください)。ast を続けて入力すると、'a' は box2 に、's' は box3 に、't' は box4 に入るはずです。これは可能ですか？

現時点では、ボックスごとに 1 文字しか入力できず、タブ キーを押すか、マウスを使用して右側の次の入力ボックスにフォーカスを移動する必要があります。

このクエストを完了するには、どの魔法の CSS/HTML/Javascript が必要ですか?

参考・関連： http: //moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html

4

2 に答える 2

2

jquery ソリューションが必要な場合は、イベントを使用できます。.keyup()また、フィールドifの長さをチェックする条件を使用することもできます。input1focus

デモ

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

maxlengthフィールドで属性も使用していることを確認inputして、ユーザーが速く入力しても文字制限を超えないようにしてください。

デモ 2

于 2013-10-24T05:36:25.360 に答える
1

@Mr.Alien が言ったように、MaxLength プロパティを設定すると、テキスト ボックスが複数の文字を持つことから保護されます。さらに、フォーカスを取得している間に、テキスト ボックス内のテキストを選択する必要があります。ユーザーが最初のテキスト ボックスから再度開始すると、プロセスが簡素化されます。

$("input").keyup(function() {

      var input_flds = $(this).next("input");
      input_flds.select().focus();

});

DEMO @Mr.Alienのデモを改変したものです

アップデート：

選択したテキストボックスに上記の概念を実装する [概念: 必要に応じて適用したいテキストボックスにクラスを設定する]

$("input").keyup(function() {

    var input_flds = $(this).nextAll(".test:first");
    input_flds.select().focus();

});

//where .test will be your class on the selected text boxes.

デモ - 1

于 2013-10-24T06:09:09.507 に答える