Enable/Disable HTML Element (IFrame) to Prevent or Allow Tabbing to it / Focusing it

Question

Hi,

Is there an easy way to enable or disable an IFrame to take it out of the Tab order?



I’ve created a simple HTML page that has several links that when clicked show or hide an IFrame associated with the link and set the SRC property of the IFrame to one of my Wordpress blogs’ PressThis forms. This way I can easily add a post to any of the blogs from a single page.

Everything on this page works nicely as expected except for the behavior of the Tab key. All of the IFrames are initially hidden and have no SRC set (eg <iframe src=""></iframe>). The problem is that when I press Tab, instead of going from link to link, it sets focus to the hidden (and empty) IFrames between links.

When the frame is shown and loaded with the PressThis form, pressing Tab correctly navigates through the input fields of the form (and everything else in the page) between links. However when the frame is then hidden again, pressing Tab still goes through each field, so getting from link to link with the keyboard is pretty bad.

I’m trying to figure out a way to toggle the IFrame so that when it is hidden, pressing Tab skips over it (it is removed from the Tab order), and when it is shown, pressing Tab navigates between its form fields.

I looked around and cannot find anything about disabling HTML elements directly (HTML elements don’t seem to have a disabled property as part of the DOM, nor is there a disabled CSS style). The closest thing I could find was people asking about disabling specific form fields.

Is there an easy way to get this done?

Thanks.

Answer 1

To disable tabbing to an element, you can set the tabindex property on the iframe to -1.

For example

<iframe src="" tabindex="-1" id="some-iframe"></iframe>

Here's a demo, try tabbing through the inputs.

If you want to re-enable the tabbing after you've set the src attribute, just set it back to 0 via javascript, the browser should take care of the rest.

document.getElementById("some-iframe").tabIndex = 0;

Answer 2

It's always better to provide some example code of what your are trying to do, you will get more interest (and answers) that way.

Anyway, i think what you are looking for is the tabindex property, you can use it to specify the tab order of the elements or even remove the element from the loop.

Quick example: http://jsfiddle.net/zFXNM/

<a tabindex="1" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="2" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="3" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

Values works this way:

• tabindex > 0 = sets element tab order, order is ASC, so 1 comes first
• tabindex = 0 = tab order follows the document tab flow.
• tabindex =-1 = removes element from the document tab flow (can't be tabbed)