Blacklist element from TAB navigation?

Question

Simple question but couldn't find any answer anywhere. How do I make so a checkbox doesn't get selected when pressing tab while on the previous element.

HTML:

<table>
    <tr>
        <td>
            <input type='textbox' placeholder='1' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='textbox' placeholder='2' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='checkbox' />
        </td>
    </tr>
    <tr>
        <td>
            <input type='text' placeholder='3' />
        </td>
    </tr>
</table>

JsFiddle

Basicly I want this result: Type something in textbox 1, press TAB and come to textbox 2, press TAB again and come to textbox 3, thereby skipping the checkbox.

This might seem stupid but I didn't include the full CSS formatting on the form, with the formatting it makes sense why to skip it. :)

Answer 1

There is many ways you can achieve this.

The simplest one involves using the HTML tabindexattribute:

<table>
    <tr>
        <td>
            <input type="text" tabindex="1" placeholder="1" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" tabindex="2" placeholder="2" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" tabindex="0" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" placeholder="3" tabindex="2" />
        </td>
    </tr>
</table>

Note that the checkbox will still be focusable; but you would have to 'tab' through all the other elements before getting to it.

(see working example at http://jsfiddle.net/URKkp/)