Disable Tab Key For Input With Certain Div ID

Question

I'd like to disable the tab key for a few input fields. But only for the ones with div id="two" and div id="five". So when you hit the tab key, you go from field one to three, to four, and then to six.

<form action="">
  <fieldset>
    <div id="one"><input type="text"/></div>
    <div id="two"><input type="text"/></div>
    <div id="three"><input type="text"/></div>
    <div id="four"><input type="text"/></div>
    <div id="five"><input type="text"/></div>
    <div id="six"><input type="text"/></div>
  </fieldset>
</form>

Anyone know of a Javascript that can do this?

Answer 1

See http://jsfiddle.net/b9gsT/

You can use tabindex attribute:

<form action="">
  <fieldset>
    <div id="one"><input type="text"/></div>
    <div id="two"><input type="text" tabindex="-1"/></div>
    <div id="three"><input type="text"/></div>
    <div id="four"><input type="text"/></div>
    <div id="five"><input type="text" tabindex="-1"/></div>
    <div id="six"><input type="text"/></div>
  </fieldset>
</form>

If you want to do it with JavaScript, use .tabIndex:

function getEl(id){
  return document.getElementById(id);
}
getEl('two').childNodes[0].tabIndex=getEl('five').childNodes[0].tabIndex=-1;

See it here: http://jsfiddle.net/b9gsT/1/

Note that the attribute is lowercase in XHTML (case-insensitive in HTML), but the property is case-sensitive: it's .tabIndex with the uppercase "I". On Firefox it works with a lowercase "i" too, but it doesn't on Chrome.