How to skip a form element from TAB navigation?

If I use TAB on the keyboard then the cursor goes f开发者_如何学运维rom 1 to 4 (1 → 2 → 3 → 4)

How can I skip number 3? I would like go 1 → 2 → 4.

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr>
</table>

LIVE: http://jsfiddle.net/49Vca/

If you set the tabindex = "-1" on the input itself of #3, you won't be able to tab to #3

Have a look at tabIndex property

Give the elements ID, and write a script on these lines...

function changeTabIndex()
  {
  document.getElementById('1').tabIndex="1"
  document.getElementById('2').tabIndex="2"
  document.getElementById('3').tabIndex="-1"
  document.getElementById('4').tabIndex="3"
  }
</script>

If using jquery is ok, you can try SkipOnTab.

SkipOnTab: A jQuery plugin to exempt selected form fields from the forward tab order.

Just add data-skip-on-tab="true" to the elements (or containers) you want to skip. You can still click to focus them or go back using shift-tab.

In your case:

<table>
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr>
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr>
</table>

See the simple demo and the business case demo. You can also try the forked jsfiddle with SkipOnTab.

Assuming there is a reason 3 needs to remain tabbable (such as an MVC view where the element is an input control and needs to remain part of the tab order, or else it won't send data back to the controller), you probably won't be able to actually skip it in both directions, and if you do find a way, it will depend on a bug that will be patched out without warning to bring the browser back into compliance with the W3 specifications regarding tab order.

To skip in either the forward or reverse direction (but not both!), add an onfocusin() event handler to element 3, that calls focus() on the element immediately following or preceding it. If onfocus events were still allowed to pass the previously focused control in the event parameter (as event.relatedTarget), you could tell what the previously focused element was, and transfer control to the previous element if focus came from the next element. However, the W3 specification makes it clear that this is not compliant behavior, and HTML5-compliant browsers are required to pass null for event.relatedTarget, and do everything else in their capabilities to prevent any focus() event handler from having access to the identity of the previously focused control, specifically nulling out any such field before either a focus() or blur() event handler is called in client-side code.