jquery - 如何让键盘选项卡聚焦于div

Question

我制作了一个消息框，上面有两个按钮。基本上它是一个 jQuery 插件，带有叠加效果的弹出窗口。但是，当出现消息框并且用户按下选项卡按钮时，消息对话框不会聚焦。 那么如果我的消息框出现，然后焦点自动转到我的消息框，我该怎么办？当焦点丢失并且用户再次按选项卡按钮时，它会再次返回到我的消息对话框 如果我用鼠标单击消息框，然后按选项卡按钮，则焦点将转到按钮，然后消失。这是图像 。这是制作盒子的代码。

var containerDiv = $("<div></div>", {
    id: config.containerDivID   
}); 

// append all the div to main Div(container)
containerDiv.append(messageDiv, buttonDiv);

centerPopup(config, containerDiv);
loadPopup(config);

function centerPopup(config, container){
    var backgroundPopup = $("<div></div>", {
        id: "backgroundPopup"
    }); //end of  imageDiv   
    $("body").append(backgroundPopup);
    $("body").append(container);
    $("#backgroundPopup").css({
        "height": windowHeight
    });
} //end of  centerPopup()

function loadPopup(config){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#" + config.containerDivID).fadeIn("slow");
        popupStatus = 1;
   }  //end of if
} //end of function loadPopup()

谢谢

Answer 1

tabindex 是 div 的东西。将其设置为零，原生 HTML5 将插入正确的 tabindex。请记住，全部小写:

<div tabindex=0> Stuff Here </div>

这将允许您使用键盘聚焦 div。

<div tabindex=0, autofocus=true> Stuff Here </div>

// select it with

document.querySelector("[autofocus]").focus();

// or with smelly jQuery

$([autofocus]).focus();

如果您使用 jQuery，则可以通过以下方式轻松找到焦点 div:

var $focused = $(':focus');

然后做一些事情，比如.click():

$focused.click()

这将点击那个东西。