如何让键盘选项卡专注于div [英] How to allow keyboard tab focusing on div

问题描述

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

I made a message box on which there are two buttons on it. Basically it's a jQuery plugin, that popup with the overlay effect. But when message box appears, and user press the tab button then the message dialog do not focus. So how can i do it then if my message box appear, then focus go to my message box automatically? and when focus lose and user press the tab button again then it again comeback to my message dialig If i click on the message box with the mouse and then press the tab button, then the focus comes to button and then gone. Here is the image . Here is the code that make the box.

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

谢谢

推荐答案

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

You can't set focus on div. You should catch "Tab" key press event and set focus on "Yes" button manually. If "Yes" button already has focus, then you should focus "No" button.

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

这篇关于如何让键盘选项卡专注于div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！