javascript - contenteditable スパンの keydown イベント

Question

まず、コードは次のとおりです。

 var max = 1;
    $('form').find('span').keydown(function(e){
        if ((e.which > 47 && e.which < 58) || (e.which > 95 && e.which < 106)) {
            if ($(this).html() >= max) {
                e.preventDefault();
                $(this).html($(this).html().substr(0,1));
               if ($(this).is(':last-child')) {
                    $(this).parent().next().find('span:first-of-type').focus();
                }
                else
                {
                    $(this).next().focus();
                }
            }
        }
        else if (e.which != 8  && e.which != 9 && e.which != 46 && e.which != 37 &&    e.which != 38 && e.which != 39 && e.which != 40)

        {
            e.preventDefault();
        }
    });

まず、入力されている数字かどうかを判断し、次に複数の数字が入力されているかどうかを確認します。これらの条件が満たされている場合は、デフォルトを防止して、2 つ以上の文字を入力してフォーカスをシフトすることはできません。次のスパンに。

私の問題は、最初のプレス フォーカスがシフトしない後、ボタンを 2 回押す必要があることです。何が問題ですか？イベントオブジェクトの理解が不十分だと思いますが、とにかく助けていただければ幸いです。

Answer 1

いくつかのこと：

1. keyupの代わりに使用しkeydownます。新しい桁がいつ追加されたかを確認したい。

2. $(this).html().length == max最大桁数に達したことを確認するために使用します。substrフォーカスを次の要素に変更するだけです。

フィドルの例(注: 例ではスパンを入力に変更しました)

アップデート

後で参照するための最終的なコードは次のとおりです。

var max = 1;
$('form').find('input').keydown(function (e) {
    if ((e.which > 47 && e.which < 58) || (e.which > 95 && e.which < 106)) {
        if ($(this).val().length < max) {
            return;
        } else {
            e.preventDefault();
        }
    } else if (e.which != 8 && e.which != 9 && e.which != 46 && e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40) e.preventDefault();
}).keyup(function (e) {
    if ($(this).val().length >= max) {
        if ($(this).is(':last-child'))
            $(this).parent().next().find('input:first-of-type').focus();
        else
            $(this).next().focus();
    }
});

Answer 2

keyupの代わりに試してくださいkeydown。