jquery，在制表符上阻止焦点在 iframe 中，但不在其中的输入中
Posted
技术标签:
【中文标题】jquery，在制表符上阻止焦点在 iframe 中，但不在其中的输入中【英文标题】：jquery, on tabbing prevent focus in iframe but not in the input inside it 【发布时间】：2017-01-12 12:18:55 【问题描述】：场景：
我有一个页面的表单加载超过 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 中的选项卡没有任何问题。 例如单击第一个输入，然后按 Tab 键进行下一个输入，直到您完成整个表单的填写。
但在 Firefox Mozilla 中：
单击第一个输入，然后 Tab 两次以获取下一个输入。它不直接选择输入字段，它似乎适用于每个元素。
是否有脚本可以防止这种情况发生？喜欢 chrome 中的正常行为吗？
我已经检查了这个Tabindex to skip iframe but not content inside 但我的情况不同
【问题讨论】：
有人吗？我还在想办法。 【参考方案1】：**更新 - 重要的是要注意这是 Firefox 和 Safari 的特殊辅助功能，即它是故意这样实现的。您的问题实际上与这个问题有关 - How to remove dotted outline from iframe in Firefox when tabbed
** 关于如何解决这个问题的想法..
我今天遇到了同样的问题，我找到了解决方案。但是，有两个重要的警告：
下面的代码仅显示部分解决方案 - 即您所要求的 - 继续前进。当用户按下 SHIFT + TAB（返回）时，他们将再次看到边框。因此，为了完全支持这一点，您需要监听这些键盘事件，发送消息 到目标 iframe，并在该控制器内聚焦输入。另外，请记住，您需要考虑不同浏览器对此的实现并妥善处理差异。
您需要成为 iframe 内容的提供者/拥有对 iframe 内容的完全控制权，才能访问 iframe 的内容、附加侦听器、获取输入和焦点。
因此，在您的 javascript 控制器中，您可以执行以下操作来实现 TAB（前进）功能：
constructor()
...
this.input = document.getElementById("yourInputId");
window.addEventListener("focus", event =>
event.preventDefault();
this.input.focus();
);
上面的sn-p中发生的是：
在整个窗口上注册一个事件监听器（在这种情况下是指整个 iframe）
拦截body focus事件（据我了解，Firefox首先关注的是跨域Iframe的body。也许是为了表明它是不同的上下文）。
防止默认 - 所以不关注
改为直接关注输入。
【讨论】：
你刚刚让我意识到这个问题只发生在 Firefox 上，谢谢！以上是关于jquery，在制表符上阻止焦点在 iframe 中，但不在其中的输入中的主要内容，如果未能解决你的问题，请参考以下文章
父页面上的 EventListener - 阻止通过 iFrame 滚动