如何获取输入元素上的关键 TAB 事件？

Question

我尝试在输入字段中按下 return 键时触发按钮。这行得通。但是，如果我按下 Tab 键，则不会触发任何内容，因为未捕获 TAB 键事件。

例如，这是我的 JQ 代码片段：

$("input[name=input]").on("keypress, keydown, keyup", function(e) {
  var code = e.keyCode || e.which;
  if ( code == 13 || code == 9 ) {
    $("input[name=btn]").trigger("click");
  }
});

我不知道如何让 Tab 键击像 return 键击一样工作。

Answer 1

使用Event.preventDefault() 来防止浏览器在Tab 按下时切换焦点。
仅监听 "keydown" 事件
使用 KeyboardEvent.key 代替

JavaScript 的 which 和 keyCode 已弃用，历史上它们都变得一团糟。
即使 jQuery 对 Event.keyCode 和 Event.which crossbrowser 使用 jQueryEvent.which 规范化，我认为 我们应该放弃这两个 并使用更多人类友好 Event.key。 9 或 'Tab' 哪个更有意义？ 13 还是 'Enter'？ 42 或者...无论如何 42 是多少

$('input[name=input]').on('keydown', function(evt) {
  if (evt.key === 'Tab' || evt.key === 'Enter') {
    evt.preventDefault();
    $('input[name=btn]').trigger('click');
  }
});

Answer 2

只绑定keydown事件。
return false 和 preventDefault 在 Tab 键上，这样焦点就不会丢失。

演示：http://jsfiddle.net/a08t4o7r/3/

$("input[name=input]").on("keydown", function(e) {
    var code = e.keyCode || e.which;

    if ( code == 13 || code == 9 ) {
        e.preventDefault();
        $("input[name=btn]").trigger("click");
        return false;
    }
});

如何获取输入元素上的关键 TAB 事件？

How to get the key TAB event on an input element?

jquery

keyup

keystroke