问题
I have a page with an iframe on it, and the iframe contains a form. Outsie my iframe i have more forms.
The input elements inside the iframe are tabindex 1, 2, 3, 4, and i gave the form elements outside the iframe tabindex 5, 6, 7, 8.
When i visit the page, and go to the input field inside the iframe (tabindex 1), and tab through, i visit 2, 3, 4 correctly, but then something happens (apparently the entire iframe gets selected), then my browser URL bar gets selected, then the search box, and only then the elements with tabindex 5, 6, 7, 8.
How can i overcome this behaviour? I would like to just skip from 4 to 5 without the other issues.
I can control both the page and the iframe contents, so javascript can be a solution, but the pages are in different domains and i cannot bring them to the same one, so it's cross-site..
Cheers!
回答1:
To answer part of your question, the body element inside the iframe is a focusable element.
You can prevent this effect by setting tabindex to -1 on the body of the loaded frame. For example:
outer.html:
<body>
<iframe src="inner.html"></iframe>
<input />
<input />
<input />
<input />
</body>
inner.html:
<body tabindex="-1">
<input />
<input />
<input />
<input />
</body>
来源：https://stackoverflow.com/questions/7441739/tabindex-to-skip-iframe-but-not-content-inside