4

I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)

I've tried to place tabIndex attribute for the input elements with no effect.

I would like to ensure the input elements in the iframe can be accessed by pressing tab key.

* Begin Edit Risking the minuses, but I have to share my opinion... I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s... Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key... End Edit *

...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.

6
  • I don't think you can do that (I hope I'm wrong) as you can't control what's inside the iframe. With tab you just interact between your elements (your html) . Anyway I'll follow the question as it may be nice if Im wrong Apr 16, 2015 at 8:49
  • @Alvaro Menéndez: I can not believe it is impossible to navigate within an iframe with tab. I do not want change anything on a 'normal' behaviour: Apr 16, 2015 at 8:52
  • 1
    What is the parent page? Is that yours too?
    – putvande
    Apr 16, 2015 at 9:51
  • Possible duplicate of stackoverflow.com/questions/6815836/… maybe you can find your answer there?
    – Olga
    Apr 16, 2015 at 10:06
  • 1
    @Olga: Yes I've read that before I asked my question. 1) The answer which checked as 'Answer' there does not even mention the iframes. 2) I wrote in my question I actually tried to use tabindex which does not helped. 3) Also "read your browser documentation" like answers (like also can be find following your link) are not appropriate because our ( your and mine) end users should not must read a browser doc to navigate though the input elements with tab as she/he used to it in the last 25 years... Apr 16, 2015 at 12:43

1 Answer 1

4

Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Outer Frame</title>
    <style>
        .iframe-wrapper {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="iframe-wrapper">
        <iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <input type="button" value="No, press me!">
</body>
</html>

And inner-frame.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inner Frame</title>
    <style>
        .wrapper {
            border: 2px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>Hello, world. I am iframe.</div>
        <input type="text" name="" id="" value="Write in me">
        <input type="button" value="Press me">
    </div>
</body>
</html>

Tested on Windows with Chrome, Firefox and IE - all latest versions.

I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/

1
  • 1
    Thanks for this demo. Now I am trying isolate and repro my case where the tab navigation definitely does not works, instead works as I described in my question. However it is a pretty complex page with bootstrap, jquery and some plugins... Apr 16, 2015 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.