$().focus未触发

Question

我正在尝试制作一个自动完成功能，并希望一旦用户按下‘向下’箭头，就将焦点应用于匹配列表中的第一个项目。

这会在搜索框中触发keyup，并很好地管理按键类型：

   var handleKeyCode = function (e) {

    switch (e.which) {

        // Arrow up
        case 38:
            alert("Up");
            break;

        // Arrow down
        case 40:
            console.log("This fires fine...");
            arrowDown();
            break;

        // Other keys
        default:
            filter();
    };

    e.preventDefault();

};

一旦向下箭头被按下，它就会触发，但是，由于某些原因，它不会应用焦点代码。当我通过控制台登录选择器时，它返回了正确的列表项，只是没有聚焦。

var arrowDown = function () {

    console.log("Code below finds the selector fine:");
    console.log($('.scheme-list li:visible:first'));

    $('.scheme-list li:visible:first').focus(function () {
        console.log("The selector is not focused AND...");
        console.log("Anything in here is not fired!");
    });
};

Answer 1

每当元素获得焦点时，$elem.focus(function () { /* do something */ })都会做一些事情。

$elem.focus()或$elem.trigger('focus')将在元素上设置焦点。

Answer 2

原来我是想把注意力集中在一个不可聚焦的元素上，而不是一个表单控件上。

为了解决这个问题，我向我的每个列表项添加了一个tabindex属性，以便在这些元素上启用焦点事件，如下所示：

<li tabindex="0"> Some item I want to focus </li>

这样我就可以调用$().focus()了，并且工作得很好。