Jquery 如何允许键盘选项卡聚焦于div

我做了一个消息框，上面有两个按钮。基本上它是一个jQuery插件，带有叠加效果的弹出窗口。但当消息框出现时，用户按tab按钮，则消息对话框不会聚焦那么我该怎么做呢？如果我的消息框出现，那么焦点会自动转到我的消息框？当焦点丢失，用户再次按tab按钮时，它会再次返回到我的消息拨号如果我用鼠标单击消息框，然后按tab按钮，则焦点会转到按钮，然后消失。这是图片。下面是生成该框的代码

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()

var containerDiv=$（“”{
id:config.containerDivID
}); 
//将所有div追加到main div（容器）
containerDiv.append（messageDiv，buttonDiv）；
centerPopup（配置，容器IV）；
加载弹出窗口（配置）；
功能中心弹出窗口（配置、容器）{
var backgroundPopup=$（“”{
id:“背景弹出窗口”
})；//imageDiv的结尾
$（“正文”）.append（backgroundPopup）；
$（“正文”）。附加（容器）；
$（“#backgroundPopup”）.css({
“高度”：窗高
});
}//centerPopup（）的结尾
函数loadPopup（配置）{
//仅在禁用时加载弹出窗口
if（popupStatus==0）{
$（“#backgroundPopup”）.css({
“不透明度”：“0.7”
});
$（“#背景弹出”）.fadeIn（“慢”）；
$（“#”+config.containerDivID.fadeIn（“慢”）；
爆米花=1；
}//如果结束
}//函数loadPopup（）的结尾

---

谢谢

您不能将焦点设置在

div

上

您应该捕获

选项卡

按键事件，并手动将焦点设置在

是

按钮上

如果

Yes

按钮已经有焦点，那么您应该聚焦

No

按钮

$('body').live('keydown', function(e) { 
  if (is_dialog_visible) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
      e.preventDefault(); 
      if (container.find(".yes").is(":focus")) {
        container.find(".no").focus();
      } else {
        container.find(".yes").focus();
      }
    }
  } 
});

---

tabindex

是div的专利。将其设置为零，原生HTML5将插入正确的

tabindex

。请记住，所有小写字母：

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

然后做一些事情，比如

。单击（）

：

---

这将单击该对象。

我不知道是否可以将焦点设置为DIV。为什么不将焦点设置为Yes/No按钮？按钮可以接受焦点。是的，我的意思是，当你按tab按钮时，按钮应该是焦点。通过将焦点设置在message div上，我可以做什么？我希望当你按下tab键时，按钮应该是焦点。感谢

KeyboardEvent。keyCode

已弃用。改为使用

KeyboardEvent.key

：

KeyboardEvent.key==“Tab”

。

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

// select it with

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

// or with smelly jQuery

$([autofocus]).focus();

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

$focused.click()