23

それぞれが 1 つの数値を取る 4 つの入力があります。私がやりたいことは、番号が設定されると、次の入力に自動的にフォーカスを設定することです。それらはすべて「入力」クラスを持っています。

これはうまくいきませんでした：

$(".inputs").keydown(function () {

            $(this).next().focus();
        });
4

12 に答える 12

59

val.length各テキストボックスに maxlength を 1 に設定し、とmaxlengthが同じになったら次のテキストボックスに切り替えることをお勧めします。

デモ

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

編集：以下に時間を費やしました（完全にはテストされていませんが、基本的なテストはうまくいきました）

   1. Allowing just numeric chars  
   2. Allow some control like del, backspace, e.t.c
   3. Backspace on empty textbox will move to prev textbox
   4. charLimit var to dynamically decide how many char you want to restrict.

コード：

$(function() {
    var charLimit = 1;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

デモ

于 2012-05-10T17:27:29.150 に答える
5

それが何であれ、それは次の要素を取得するだけです。あなたはおそらく欲しい：

$(".inputs").keyup(function () {
  $(this).next(".inputs").focus();
});

また、キーダウンではなくキーアップしてください。そうしないと、すぐに変更されます。

于 2012-05-10T17:20:10.030 に答える
1

次の入力を見たいだけで、このような方法でセパレーターを言う場合

<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="DD" name="dobday" id="dobday">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="MM" name="dobmonth" id="dobmonth">
<div class="separator">/</div>
<input type="number" pattern="[0-9]*" inputmode="numeric" maxlength="4" placeholder="YYYY" name="dobyear" id="dobyear">

次のすべてのアイテムを取得し、見つかった最初の入力に落ち着くには、次のコードが必要です。

$('input#dobday,input#dobmonth,input#dobyear').on('input', function(e) {
    if (jQuery(this).val().length >= parseInt(jQuery(this).attr("maxlength"), 10)) {
            if (jQuery(this).attr('id') === 'dobyear') {
                jQuery(this).blur();
            } else {
                jQuery(this).nextAll('input:first').focus();
            }
    }
}
于 2018-05-22T10:07:56.703 に答える
0

これにより、クラスまたは ID に名前を付けずに next を使用した後、テキスト ボックスにフォーカスが維持されます。

 $(this).hide();        
 $(this).next().show();
 $('input[type=text]').focus();
于 2013-07-09T09:31:04.487 に答える
0

使用keyup例

$(".inputs").keyup(function () {
    $(this).next().focus();
});​

実際に見てくださいhttp://jsfiddle.net/qygB2/

于 2012-05-10T17:21:08.250 に答える
0

最新の jQuery バージョンを使用している場合は、このon方法を使用することを強くお勧めします。jQuery のソース コードにアクセスすると、他のすべてのイベント メソッドがこのメソッドにリダイレクトされるようになっていることがわかります。このメソッドを直接使用しないでください。

$(document).ready(function () {
        $('.inputs').on('keyup', function(){
            $(this).next().focus();
        })
});
于 2012-05-10T17:29:04.103 に答える