如何让键盘选项卡专注于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按键事件并Yes手动将焦点设置在按钮上。

如果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();
      }
    }
  } 
});