0

我有一个 html 表单。

  1. 它使用键盘导航（带有箭头键）在字段之间移动，包括“输入”键。
  2. 它需要定期提示用户接受信息。
  3. 回车键在按钮和表单域中都被拾取。

问题：当用户在接受按钮上点击“ENTER”时，它会在我的表单中触发双重事件。移动焦点 2 个字段而不是 1 个。

我有代码可以准确地演示我在这里谈论的内容：

原帖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

改用按键事件：

$('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 回答