I have a requirement of changing focus of elements in a div by using tab key. focus should not be moved away from the elements in the div. How can this be done. I am trying this approach:

1) get all the elements inside div to an array

2) bind a keypress event to each element in the array and passing the nxt element to it

3) handling keypress by a function that will shift the focus to next element.

sample code:

var elements = jQuery('xxx');
elements.each(function (index, element) { 
  element.bind("keypress", { nxt:elements[index+1] }, function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.data.nxt[0].focus();
    }
  });
});

My doubt is,

1)how to get all the elements from the div that can be focused on tab key press.

2)Is there anything in jQuery that can get different type of elements in one go.(something like, to get input+select+a+textarea in one statement)

3)If this approach is not worth, please suggest one.

I have a requirement of changing focus of elements in a div by using tab key. focus should not be moved away from the elements in the div. How can this be done. I am trying this approach:

1) get all the elements inside div to an array

2) bind a keypress event to each element in the array and passing the nxt element to it

3) handling keypress by a function that will shift the focus to next element.

sample code:

var elements = jQuery('xxx');
elements.each(function (index, element) { 
  element.bind("keypress", { nxt:elements[index+1] }, function(e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) {
      e.data.nxt[0].focus();
    }
  });
});

My doubt is,

1)how to get all the elements from the div that can be focused on tab key press.

2)Is there anything in jQuery that can get different type of elements in one go.(something like, to get input+select+a+textarea in one statement)

3)If this approach is not worth, please suggest one.

• javascript
• jquery
• html

• Div may contain input,select,a,div,span and other elements – dush Commented Mar 4, 2013 at 14:56

4 Answers 4

Check out this fiddle. It may help you HTML code

<div id="container">
    <input type="text" id="first"/>
    <input type="text" id="second"/>
    <input type="text" id="third"/>
</div>

JavaScript Code:

var elems = $('div#container input');



 elems.each(function(index,element) {
    console.log(element);
    $(element).keydown(function(e) {
        var code = e.keyCode || e.which;
        console.log(code);
        if(code === 9) {
           $(this).next().focus();
           e.preventDefault();
        }
    })
})

http://jsfiddle/tmFFk/1/

you don't need jquery for this. you can use tabIndex attribute to switch over. tabIndex.

<div tabIndex="1">asdasd</div>
<div tabIndex="2">asdasd 2</div>
<div tabIndex="3">asdasd 3</div>

demo : tabIndex

I had similar problem and created tiny jQueryUI plugin that limits fields that TAB affects. you use it simply:

$(".someGroup").tabGuard();

and that will make tab iterate over fields inside of .someGroup wrapper. This way you can group various forms on a page and the one in focus will keep iterating on TAB or Shift+TAB if that makes sense. Find it here:

http://tomaszegiert.seowebsolutions..au/tabguard/index.htm

It uses :tabbable to get all the elements that TAB can focus on and feel free to check source to see how its done. I hope you will find it useful.

If I'm reading it right, you need to switch in between DIVs with Tab press. As per the Specification, Tabindex is not supported on Div's. It's only supported on A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

As for the question, it's quite an unusual requirement but a very interesting one. I've never tried this out, but I can give my suggestions logically for each of your queries:

1. You can use .children() to get all child elements within that div.

2. You can use all selectors in one go by separating them with mas, or you can give them classes.

Let me know if it works out.