Geek Answers Handbook

Enable / disable HTML element (IFrame) to prevent or prohibit binding to it / Focus

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

Ive created a simple HTML page with multiple links that, when clicked, displays or hides the IFrame associated with the link and sets the SRC IFrame property to one of my Wordpress PressThis blogs. Thus, I can easily add a message to any of the blogs from one page.

Everything on this page works just fine, as expected, except for the behavior of the Tab key. All IFrames are initially hidden and do not have an SRC set (for example, <iframe src=""></iframe> ). The problem is that when I press Tab, instead of moving from link to link, it focuses on hidden (and empty) IFrames between links.

When the frame is displayed and loaded by the PressThis form, pressing Tab correctly moves through the form input fields (and everything else on the page) between the links. However, when the frame is hidden again, pressing Tab still goes through each field, so getting a link from a link from the keyboard is pretty bad.

Im trying to figure out a way to switch the IFrame, so that when it is hidden, pressing Tab skips it (it is removed from the tab order), and when it is displayed, pressing Tab moves between the form fields.

I looked around and couldn't find anything about disabling HTML elements directly (HTML elements do not seem to have a disabled property as part of the DOM, and there is no CSS style). The closest I could find are people who ask about disabling certain form fields.

Is there an easy way to do this?

Thanks.

+4
source share
2 answers

It is always better to provide an example code of what you are trying to do, you will get more interest (and answers) in this way.

In any case, I think that you are looking for the tabindex property, you can use it to indicate the order of the tabs 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 ​​work like this:

  • tabindex > 0 = sets the tab order of elements, the order is ASC, so the first comes first
  • tabindex = 0 = tab order follows the tab of the document tab.
  • tabindex =-1 = removes an item from the document tab stream (cannot be bookmarked)
+6
source

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

for instance

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

Here's a demo , try pasting tabs.

If you want to turn tabs on again after you 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;
+1
source

More articles:


All Articles