为什么我的DIV在获得焦点时无法捕获键盘按键事件？

Question

我正在使用jQuery 1.12版本。当一个DIV获得焦点时，我希望它能够捕获按键事件（特别是向下和向上箭头键）。因此，我遵循了这个方法：

 $('div.select-styled').bind('keydown', function(event) {
    console.log(event.keyCode);
    elt = $(this).search(".select-options li:hover");
    console.log(elt);
    switch(event.keyCode){
    // case up
    case 38:
        console.log(“up pressed.”)
        break;
    case 40:
        console.log(“down pressed”)
        break;
    }
 });

但是这并没有捕捉到按键。请看我的Fiddle链接 - http://jsfiddle.net/cwzjL2uw/10/。点击“Select State”菜单，或者点击“Last Name”字段并点击“Tab”以将焦点转移到下一个DIV。但是，当那个菜单获得焦点时，单击任何键都不会激活上面的处理程序，至少在Mac Chrome或Firefox中对我没用。

非常感谢您的帮助，-

- Dave

Answer 1

给你的 .select-styled 元素添加 tabindex 属性 (例如：tabindex="1") 将允许它接收 JavaScript 键盘事件。

---

解释： jQuery API 的 .keydown() 提到它只适用于可聚焦元素：

它可以附加到任何元素，但事件只会发送到具有焦点的元素。可聚焦元素在不同的浏览器中可能会有所不同，但表单元素始终可以获得焦点，因此是此事件类型的合理候选项。

根据这个之前的 Stack Overflow 答案，<div> 元素默认情况下是不可聚焦的，但是 DOM Level 2 HTML 规定，除其他规则外，任何带有 tabindex 的元素都可以接收焦点：

今天的浏览器在 HTMLElement 上定义了 focus()，但实际上只有以下几种情况才会获取焦点：

• 带有 href 的 HTMLAnchorElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement，但不要禁用（IE 如果尝试会产生错误），文件上传出于安全原因具有异常行为
• HTMLIFrameElement（虽然聚焦它不会做任何有用的事情）。其他嵌入元素也可能是，我没有测试过所有的。
• 带有 tabindex 的任何元素

---

或者，这可能是更好的做法，当元素接收到 focus 时，你可以将你的 keydown 事件处理程序绑定到 $(document) 上（你的 jQuery 已经处理得很好了），并在 blur 上解除绑定。

- Jon Uleis

Answer 2

问题是，当您按下tab键时，焦点在.select而不是.select-styleddiv元素上，因为.select是包含其余元素的父元素。因此，您可能需要将keydown绑定到.select上。

$(".select").on('keydown',function(event) {
    console.log(event.keyCode);
    elt = $(this).search(".select-options li:hover");
    console.log(elt);
    switch(event.keyCode){
    // case up
    case 38:

        break;
    case 40:
        break;
    }
});

这里是更新的 Fiddle。

- Guruprasad J Rao

---

这仅适用于.select元素已经具有tabindex属性（如下面我的答案所述）-但不仅因为.select是父级。删除tabindex，你会看到问题再次出现。 - Jon Uleis

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Guruprasad J Rao