views:

99

answers:

3

As question really. I have an input box on my page that I would like to ignore when navigating using the keyboard tab key.

I'm using this input box as a simple bot honeytrap and positioning it off the page, so at the moment when using the tab key, it looks to the user as though nothing has focus when they tab to this element.

+6  A: 

You can use tabindex attribute to define order in which the tab key should cycle through elements. If you set tabindex="-1" the element will be skipped.

More info is available here http://www.webcheatsheet.com/HTML/controll_tab_order.php for example.

UPDATE changed tabindex="0" to "-1" based on comments

michal kralik
This is only part of the solution, though - the focus will end up at the element at some point, just later.
Pekka
This is incorrect: http://jsfiddle.net/6QuHc/
Nick Craver
Tabindex=0 causes the element to be indexed using the normal conventions — http://www.w3.org/TR/html5/editing.html#negative-tabindex — it is used to add elements to the normal sequence that are not normally focusable, not to exclude them.
David Dorward
+1 `tabindex='-1'` indeed seems to work completely (with the input element coming out of the rotation). Deleting my answer with the JS approach.
Pekka
Setting tabindex to -1 works great - thanks for all the replies and suggestions.
thor
+1  A: 

display: none it instead.

David Dorward
True, but more advanced bots might check for that. (as they might for positioning it off the page, but that's real advanced).
Konerak
That is, hypothetically, possible. OTOH, if you off-screen it then screen readers will present it to real users.
David Dorward
I did consider setting display to none but I was concerned that bots would find this much easier to check than positioning off-page, as Konerak stated.I'd already tested it with some screen-reading software and noticed it appears as an unlabelled text input box. This is obviously an issue but it's one I think we're going to have to live with for the time being and take another look at it later.
thor
+2  A: 

You can set the tabindex="-1" on this element so it's ignored in the tad order. 0 tells the browser to figure out the tab order on it's own, -1 tells the browser to ignore it.

Nick Craver