如何让键盘选项卡专注于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()

这将点击该内容。

Answer 2

您无法将注意力设置在div上。您应该捕获“Tab”键按下事件并手动将焦点设置为“是”按钮。如果“是”按钮已经有焦点，那么您应该关注“否”按钮。

$('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();
      }
    }
  } 
});