如何让键盘选项卡专注于div

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

var containerDiv = $("
", { 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 = $("
", { 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

你不能把注意力放在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(); } } } }); 

Answer 2

嗯，帕维尔，tabindex是div的东西。 将其设置为零，本机HTML5将插入正确的tabindex。 请记住，所有小写。

 
 Stuff Here  

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

 
 Stuff Here 
 $([autofocus]).focus() 

这将在渲染时自动聚焦div。 确保您只有一个启用自动对焦的元素或HTML5混淆。

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

这将从您的页面中获取焦点元素。

 $focused.click() 

这会点击那个东西。