Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to allow keyboard tab focusing on div

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

like image 866
Basit Avatar asked Apr 19 '12 11:04

Basit


People also ask

How do you make a tab focus on a div?

Insert an element into the tab order # To focus an element, press the Tab key or call the element's focus() method.

How do I make a div clickable by keyboard accessible?

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

Is it possible to focus on a div?

How to focus on a HTML Division a.k.a <div> Even though we say we know our way around the HTML elements via JS, we still have and will some issues on pretty basic stuff as easy as focusing a non-input type DOM element. With the help of “tabindex” we make everything go focus() ;-) Key of success is “tabindex”.

How do you add a tab to a focus?

Setting the value to “-1” also allows you to programmatically enable tab focus. Say you have an element that you don't want focusable on page load but after some event, you'd like to be focusable—you'd use tabindex=“-1” and the “. focus()” function to add that behavior.


1 Answers

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.

like image 62
taystack Avatar answered Oct 20 '22 00:10

taystack