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

Question

我尝试在输入字段中按下返回键时触发按钮。这有效。但是，如果我按下 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 键像回车键一样工作。

Answer 1

• 使用Event.preventDefault()以防止浏览器将焦点切换Tab按。
• "keydown"只监听事件
• 使用KeyboardEvent.key代替

JavaScript 的which 和 keyCode 已弃用，从历史上看，它们都变得一团糟。
即使 jQuery 对jQueryEvent.whichforEvent.keyCode和Event.whichcrossbrowser都进行了规范化，我认为我们应该放弃两者并使用更人性化的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

1. 只绑定keydown事件。
2. return false并按preventDefaultTab 键，这样焦点就不会丢失。

演示： 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;
    }
});