0

私はhtmlフォームを持っています。

  1. 「Enter」キーを含むフィールド間を移動するには、キーボード ナビゲーション (矢印キーを使用) を使用します。
  2. 情報を受け入れるようにユーザーに定期的に促す必要があります。
  3. Enter キーは、ボタンとフォーム フィールドの両方で取得されます。

問題: ユーザーが同意ボタンで「ENTER」を押すと、フォームで 2 つのイベントがトリガーされます。フォーカスを 1 フィールドではなく 2 フィールドシフトします。

ここで話していることを正確に示すコードがあります。

元の投稿http://jsfiddle.net/mcraig_brs/UgUUr/1/

変更された投稿http://jsfiddle.net/mcraig_brs/UgUUr/2/

サンプル HTML は次のとおりです。

<button id="myButton">Press Enter On Me</button><br>
<input type="text" id="text1" class="tInput" data-index="0"><br>
<input type="text" id="text2" class="tInput" data-index="1"><br>
<input type="text" id="text3" class="tInput" data-index="2"><br>
<div id="log"></div>

サンプル JS は次のとおりです。

function log ( data ) {
    $('#log').append(data + "<br>");   
}
function focusOn(index) {
    log("focusOn(index): " + index);
    $('input.tInput').eq(index).focus();   
}
function focusNext( currentIndex ) {
    log("focusNext(currentIndex):" + currentIndex);
    focusOn(currentIndex + 1);
}
function focusPrevious (currentIndex) {
    log('focusPrevious(currentIndex):' + currentIndex);
    focusOn(currentIndex - 1);
}
$('#myButton').on('click', function(e) {
    log("event:click #myButton");
    focusOn(0);
});
$('input.tInput').on('keyup', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
        case 38:
            log("event:UP ARROW key in input.tInput");
            focusPrevious($(this).data('index'));
            break;
        case 40:
            log('event:DOWN ARROW key in input.tInput');
            focusNext($(this).data('index'));
            break;
    }   
});

現在のコードのボタンにフォーカスがあるときに「ENTER」を押すと、ログ div に次の出力が表示されます。

event:click #myButton
focusOn(index): 0
event:ENTER key in input.tInput
focusNext(currentIndex):0
focusOn(index): 1

(現時点では、jsFiddle でボタンにアクセスできる唯一の方法は、最初のテキスト フィールドにフォーカスし、「Shift + Tab」でそこに戻ってフォーカスを移動し、「ENTER」を押すことができるようにすることです。しかし、ライブコードは自動的にユーザーにフォーカスされます。)

質問: このタイプのダブル イベントがトリガーされないようにするにはどうすればよいですか? e.stopPropagation() を試しましたが、探していた結果が得られませんでした。ユーザーが「ENTER」を押したときに、フォーカスを1フィールドだけ進めたい。

私はこれに数日間取り組んでいるので、どんな助けも大歓迎です. ユーザーがマウスでボタンをクリックすると、ボタンは正しく機能しますが、ダブル イベントをトリガーするのは ENTER キーのみであることに注意してください。

注：制約をよりよく伝えるために、質問を少し変更する必要がありました。

4

2 に答える 2

4

keyupが問題を引き起こしている場合は、次のように変更しますkeypress

$('input.tInput').on('keypress', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

http://www.quirksmode.org/dom/events/keys.htmlから

キープレス

テキスト入力などに実際の文字が挿入されたときに発生します。ユーザーがキーを押したままにしている間、これが繰り返されます。

キーアップ

そのキーのデフォルト アクションが実行された後、ユーザーがキーを離したときに発生します。

- - 編集 - -

キーの押下とキーアップの両方をキャッチするには、別々に定義することをお勧めしますhttp://jsfiddle.net/UgUUr/3/

$('input.tInput').on('keypress', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

$('input.tInput').on('keyup', function(e) {
    switch (e.which) {
        case 38:
            log("event:UP ARROW key in input.tInput");
            focusPrevious($(this).data('index'));
            break;
        case 40:
            log('event:DOWN ARROW key in input.tInput');
            focusNext($(this).data('index'));
            break;
    }   
});
于 2013-09-19T13:51:08.020 に答える
1

代わりに keypress イベントを使用します。

$('input.tInput').on('keypress', function(e) {    
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

デモ

于 2013-09-19T13:50:42.830 に答える