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;
    }
 });

但这并没有抓住按键。在这里查看我的小提琴 - http://jsfiddle.net/cwzjL2uw/10/。单击“选择状态”菜单，或单击“姓氏”字段并单击“选项卡”以将焦点放在下一个DIV上。但是，当该菜单具有焦点时，单击任何键不会激活上面的处理程序，至少在Mac Chrome或Firefox上不适合我。

感谢任何帮助， -

Answer 1

为.select-styled元素提供tabindex属性（例如：tabindex="1"）将允许它接收JavaScript键盘事件。

<强>说明： .keydown()的jQuery API提到它只适用于可聚焦元素：

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

根据此previous Stack Overflow answer，<div>元素默认情况下无法调焦，但DOM Level 2 HTML表示在其他规则中，任何带有tabindex的元素都可以获得焦点：

今天的浏览器在HTMLElement上定义了focus（），但是元素不会   除非它是以下之一，否则实际上需要关注：


带有href的HTMLAnchorElement / HTMLAreaElement

HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement   但不是禁用（如果你尝试，IE实际上会给你一个错误），   出于安全原因，文件上传有异常行为

HTMLIFrameElement（虽然重点关注它没有做任何有用的事情）。   其他嵌入元素也许，我还没有测试过它们。

任何带有tabindex的元素

或者，这可能是更好的做法，当元素收到keydown时，你可以简单地将$(document)事件处理程序绑定到focus（你的jQuery已经处理没有问题），并在blur上取消绑定。

Answer 2

问题在于，当您按tab时，焦点位于.select而不是.select-styled div element，因为.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;
    }
});

这里是 Updated Fiddle

为什么我的DIV在获得焦点时不会捕获按键事件？

2 个答案: