8

我做了一个消息框，上面有两个按钮。基本上它是一个 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()

谢谢

4

2 回答 2

22

tabindex是divs的东西。将其设置为零，原生 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()

这将点击那个东西。

于 2014-05-26T17:07:14.473 回答
-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();
      }
    }
  } 
});
于 2012-04-19T11:44:51.667 回答