Question

我有一个iframe页面。 iframe包含输入元素。当用户将光标放入iframe中的第一个输入文本框并按Tab键时，焦点将从iframe跳出， parent 页面中的下一个元素将获得焦点。（而是保留在iframe中，并将焦点放在第二个输入元素上。）

我试图为输入元素放置tabIndex属性而没有效果。

我想确保按tab键可以访问iframe中的输入元素。

*开始修改冒犯了这些弊端，但我必须分享我的意见...... 我认识到回答这个问题是不明显的。关于这种行为的UX后果：看到浏览器和html / css我们仍然有这些白洞将我们传送到UI / IX的石器时代：80年代早期90年代... 让自己置身于最终用户的境地，最终用户尝试使用Tab键在UI元素之间导航... 结束编辑*

...抱歉，如果有人感到被冒犯，因为在HTML 6 +时代没有明显的答案......我认为我们应该解决或解决这个问题，以确保最终用户的用户体验....或者不是这可重复吗？如果我错过了什么，请告诉我。

Answer 1

请考虑这个与您的说法相矛盾的简单示例。选项卡可以正确地浏览子框架和父框架的表单元素。

<!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>

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>

使用Chrome，Firefox和IE在Windows上进行测试 - 所有最新版本。

我也做了一个JS小提琴来演示它。但由于某种原因，要呈现iframe，您需要先按Run。 http://jsfiddle.net/gjng7dgg/4/

包含iframe的页面中的选项卡（键盘）导航

1 个答案: