为什么在 Tab 键按下后 preventDefault() 不停止焦点更改？答案

【问题标题】：Why doesn't preventDefault() stop focus change after a Tab-keypress?为什么在 Tab 键按下后 preventDefault() 不停止焦点更改？
【发布时间】：2014-06-24 20:57:39
【问题描述】：

I was fiddling withpreventDefault()，一定是做错了什么。

$("#input").bind("keypress", function(event) {
    if(event.which == 9) {
    event.preventDefault();
    alert("You pressed tab.");
    }
});

标签功能不会被阻止。这有什么问题？

【问题讨论】：

它在做什么或不做什么？
看到 JSFiddle 了吗？没有警报，标签的功能仍然存在。
您的小提琴正在加载淘汰赛，但您的问题被标记为 jQuery。
“keypress”和“keydown”有很大的不同。 “按键”只能用于实际修改<input> 值的键。例如，Chrome 不会为各种 ALT 组合键触发“按键”。
也许见this？

标签： javascript jquery keypress preventdefault

【解决方案1】：

试试这个FIDDLE。选项卡时输入失去焦点。绑定到 body 可以解决这个问题。

$("body").on("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
    alert("You pressed tab.");
}
});

【讨论】：

是改变绑定控件还是从keypress变成keydown？
将 keypress 更改为 keydown 是关键部分。另外，请注意，这将触发每次按下页面上任何位置的选项卡。如果您不希望它这样做，可以将其包装在这样的容器中：jsfiddle.net/spL5r/5

【解决方案2】：

当 Tab 被按下时，keypress 事件只是没有触发 - 这也解释了为什么没有警报，独立于阻止默认值的行为。

将代码更改为使用 keydown 可以捕获 Tab 并阻止默认焦点更改（无论如何在 Chrome¹ 中）。

$("#input").bind("keydown", function(event) {
    if(event.which == 9) {
        event.preventDefault();
    }
});

¹ 我在 Chrome 35 with jQuery 1.6-2.1 中测试了上述内容；它在 KO 3.0 库下不工作。

【讨论】：

Chrome 是最重要的，无论如何..
是的，我的错。忘了我换了JQ。作品

【解决方案3】：

来自 JQuery 的文档，

注意：由于 keypress 事件未包含在任何官方规范中，因此使用它时遇到的实际行为可能因浏览器、浏览器版本和平台而异。

此方法是前两个变体中 .on( "keypress", handler ) 和第三个变体中 .trigger( "keypress" ) 的快捷方式。

当浏览器注册键盘输入时，keypress 事件被发送到元素。这类似于 keydown 事件，不同之处在于修饰键和非打印键（例如 Shift、Esc 和 delete）触发 keydown 事件但不触发 keypress 事件。取决于平台和浏览器，这两个事件之间可能会出现其他差异。

所以在这种情况下，您使用了错误的事件。也可能存在浏览器兼容性问题。

【讨论】：