09 March 2011

Make HTML elements like DIV, SPAN, Table focusable


When you need to detect onkeydown event it is fine to do this with focusable elements like: inputs, dropdowns,..., but what to do with non-focusable elements like DIVs, SPANs, TABLEs?

You can achieve this by adding TABINDEX attribute to these elements, this way browsers will consider that element as a focusable element.

Also depending of what value you set to tabindex attribute - it will behave differently:

  • If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
  • If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
  • Values greater than 0 create a priority level with 1 being the most important.

This will work on popular browsers like IE 6+, Chrome, Safari and Firefox.

1 comment:

FindFiles.net said...

We are redesigning our web presence and your tip is what I have been looking for. Thanks.

Post a Comment

your thoughts are welcome:

Need more? Leave comments and subscribe to my blog.