8

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 enter image description here. 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()

Thanks

Basit
  • 8,426
  • 46
  • 116
  • 196
  • I don't know if you can set focus to DIV. Why don't you set focus to the Yes/No buttons? Button can accept focus. – Muhammad Alvin Apr 19 '12 at 11:32
  • yes i meant to say , the button should be focus when you press the tab buttons. What do i do by setting focus on the message div? i want that when you press the tab key then button should be focus. Thanks – Basit Apr 19 '12 at 13:02

2 Answers2

22

tabindex is a thing for divs. Set it to zero and native HTML5 will insert the correct tabindex. Remember, all lower case:

<div tabindex=0> Stuff Here </div>

This will allow you to focus the div with the keyboard.

<div tabindex=0, autofocus=true> Stuff Here </div>

// select it with

document.querySelector("[autofocus]").focus();

// or with smelly jQuery

$([autofocus]).focus();

If you're using jQuery, you can find the focused div easily with:

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

Then do things, like .click():

$focused.click()

This will click that thing.

taystack
  • 2,004
  • 18
  • 17
-2

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();
      }
    }
  } 
});
Boken
  • 4,825
  • 10
  • 32
  • 42
Pavel Strakhov
  • 39,123
  • 5
  • 88
  • 127