1

ボタンと一連のテキスト フィールドがあります。キーボードナビゲーションを容易にしようとしています。ここに私が持っているものがあります:

HTML

<button id="button1">Click me</button>
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input type="text" id="field3" name="field3">

JS/JQUERY v 1.9.1

/* If they click the button */
$('#button1').on('click', function() {
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */
});
/* If they hit "enter" on the button */
$('#button1').on('keyup', function(e) {
    if (e.which === 13) {
        moveToNextInputField();
    }
});
/* Capture keyboard input to limit to Numbers */
$('input').on('keydown', function (e) {
    switch(e.which) {
        case 48:
        case 49:
        case 50: /* All numbers, or wanted keys, etc.... */
            $(this).data('changed', true);
            break;
        default:
            e.preventDefault();  /* prevent other unwanted keys from doing anything */
            break;
    }
});
/* Capture keyboard input for keyboard navigation */
$('input').on('keyup', function (e) {
    switch (e.which) {
        /* other cases to do stuff excluded */
        case 13:
            moveToNextInputField();
            break;
    }
});

私が抱えている問題は、Firefox と IE10 (おそらく他のもの) で、ボタンを選択して「ENTER」を押すと、2 つのイベントがトリガーされることです。最初のイベントはフォーカスを次のフィールドに移動し、2 番目のイベントは同じことを行います。「ENTER」キーを十分に速く押すことができないようです。このコードを実行してボタンの「Enter」を押すと、field2 になります。

だから私の質問に：イベントを「ロック」して、複数ではなく1つのイベントのみをトリガーすることは可能ですか？

補足として、これを行うためのより良い方法があれば、私はすべて耳にします。

解決：

私の答えは、推奨されるものの組み合わせであることがわかりました。

  1. 私は $('#button1').on('keyup'....) を取り除きました。冗長でした。
  2. $('#button').click(...) 関数内に e.stopImmediatePropigation() を追加しました。これで私の問題は解決しました。

機能したソリューションは次のようになります。

/* If they click the button or press ENTER while focused */
$('#button1').on('click', function(e) {
    e.stopImmediatePropigation(); 
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */
});

/* Capture keyboard input to limit to Numbers */
$('input').on('keydown', function (e) {
    switch(e.which) {
        case 48:
        case 49:
        case 50: /* All numbers, or wanted keys, etc.... */
            $(this).data('changed', true);
            break;
        default:
            e.preventDefault();  /* prevent other unwanted keys from doing anything */
            break;
    }
});
/* Capture keyboard input for keyboard navigation */
$('input').on('keyup', function (e) {
    switch (e.which) {
        /* other cases to do stuff excluded */
        case 13:
            moveToNextInputField();
            break;
    }
});

助けてくれてありがとう..うまくいけば、これは他の人にも役立ちます。乾杯。

4

3 に答える 3

1

クリックは一種の特別なイベントであることに注意してください。ボタン機能をトリガーする必要があるときに生成されます。そのため、通常はマウスダウン、ENTER、または SPACE の後に発生します。いくつかのソリューションを適用できます

  1. ENTER キーを認識したときの keyUp ハンドラーの e.preventDefault。
  2. クリックの代わりにマウスダウンを使用する
  3. クリック ハンドラーをまったく削除します (ENTER と SPACE でトリガーされます)。

ところで。また、キーアップではなくキープレスを使用することをお勧めします-こちらをご覧ください。

于 2013-07-10T21:11:19.593 に答える
0

それを行うには、jQuery の deferred を試すことができます。どちらが最初に起動されても、遅延オブジェクトを解決済みに設定できます。オブジェクトの状態をチェックして、すでに解決されたときではなく、初めて起動するかどうかを確認できます。

于 2013-07-10T20:56:37.070 に答える