4

场景：

我有一个加载超过 4 个 iframe 的表单页面。我无法控制此 iframe，因为它是由其他网站（API）生成的；

Iframe 有一个表单和输入。

在我的代码中

<form>
<div class="fields">
    <!--onload iframe will populate this area-->
</div>  

<div class="fields">
    <!--onload iframe will populate this area-->
</div>  

<div class="fields">
    <!--onload iframe will populate this area-->
</div> </form>

在页面加载时发生这种情况

<form>
<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div>  

<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div>  

<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div></form>

在 chrome 中：填写表格时，chrome 中的选项卡没有任何问题。例如，单击第一个输入，然后按 Tab 键进行下一个输入，直到您完成整个表格的填写。

但在 Firefox Mozilla 中：

单击第一个输入，然后 Tab 两次以获取下一个输入。它不直接选择输入字段，它似乎适用于每个元素。

有没有脚本可以防止这种情况？像chrome中的正常行为一样？

我已经检查了这个Tabindex 以跳过 iframe 但不是里面的内容， 但我的情况不同

4

1 回答 1

1

**更新 - 重要的是要注意这是 Firefox 和 Safari 的特殊辅助功能，即它是故意这样实现的。您的问题实际上与这个问题有关 - How to remove dotted outline from iframe in Firefox when tabbed

** 关于如何解决这个问题的想法..

我今天遇到了同样的问题，我找到了解决方案。但是，有两个重要的警告：

  1. 下面的代码仅显示了部分解决方案 - 即您所要求的 - 继续前进。当用户按下 SHIFT + TAB（返回）时，他们将再次看到边框。因此，为了完全支持这一点，您需要监听这些键盘事件，向目标 iframe 发送消息，并在该控制器中聚焦输入。另外，请记住，您需要考虑不同浏览器对此的实现并优雅地处理差异。

  2. 您需要成为 iframe 内容的提供者/完全控制 iframe 内容，以便访问 iframe 的内容、附加侦听器、获取输入和焦点。

因此，在您的 JavaScript 控制器中，您可以执行以下操作来实现 TAB（前进）功能：

constructor() {
   ...
   this.input = document.getElementById("yourInputId");
   window.addEventListener("focus", event => {
     event.preventDefault();
     this.input.focus();
   });
}

上面的代码片段中发生的是：

  1. 在整个窗口上注册一个事件监听器（在这种情况下意味着整个 iframe）

  2. 拦截body focus事件（据我了解，Firefox首先关注跨域Iframe的body。也许是为了表明它是一个不同的上下文）。

  3. 防止默认 - 所以不要专注

  4. 而是直接关注输入。

于 2019-09-25T16:57:56.160 回答