Prevent certain elements from receiving focus

If you set the tabindex to -1 on the element, it will ignore the tab.

Not sure if this works in all browsers but it works in Google Chrome.

<input type='text' value='regular'/>
<input type='text' tabindex="-1" value='with tabindex set to -1'/>

If you make something disabled, it won't receive focus. For example:

<input type="text" disabled="disabled" />

Do add it programmatically, you could do:

var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');

This works (updated) :

$body.on("focus.spt", "*", function(e){
  $this = $(this);
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
    var next=$this.nextAll().find('a,input');
    if (next.length>0) next[0].focus();
  } else {
    console.log('ok',this);
    e.stopPropagation();
  }
})

(updated) fiddle -> http://jsfiddle.net/CADjc/ You can see in the console which elements that receives focus (main-menu a and mobile-menu)

Tested on :

<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
    <div id="main-menu">
        <a tabindex="4">main-menu</a>
        <a tabindex="5">main-menu</a>
    </div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>