为什么我无法在 iframe 内的表单元素之间使用 Tab 键？

发布于 2024-07-22 05:44:41 字数 1775 浏览 7 评论 0原文

我的网站中有一个页面，其中包含一个带有表单的 iframe。我无法更改这一点，但我确实可以完全控制在父页面和 iframe 页面中运行的所有 JS。

我的问题是，当我有一个表单字段集中在 iframe 文档中时，按 Tab 键切换到下一个字段会将光标直接发送到浏览器的地址栏，而不是表单中的下一个字段。在每个字段上设置 tabindexes 没有帮助。

浏览器将整个 iframe 本身视为页面中的元素之一（理应如此），但我想知道是否有一种方法可以捕获选项卡事件并强制焦点保留在 iframe 及其子元素内部。

你们中有人以前遇到过这个问题并有解决办法吗？

并不是说它会对您有帮助，但布局是这样的：

+-------------------------------------------+
| Parent page                               |
|         +-------------------------------+ |
|  N      | iframe                        | |
|  a      |                               | |
|  v      | Has about 50 fields that I'd  | |
|  i      | like to be able to tab between| |
|  g      |                               | |
|  a      | But I can't! Help!            | |
|  t      |                               | |
|  i      +-------------------------------+ |
|  o                                        |
|  n                                        |
+-------------------------------------------+

一个想法是尝试捕获 iframe 中的 keydown 事件，检查 tab 或 shift+tab 然后重新聚焦 iframe，但是存在知道哪个字段的问题在失去焦点之前我就在。有没有办法使用 JS 和表单字段上的 tabindex 属性动态聚焦下一个字段？也许这就是我下一步冒险的地方......

更新：也许我缺少一些更简单的东西。例如， http://www.studentloan.com 上的登录框是一个 iframe，我可以在之间切换那些领域就好了。也许我的 JS 中的其他东西导致了这个问题。

更新 2： 我尝试在浏览器中仅加载 iframe 文档作为独立页面，但仍然无法使用 Tab 键。我认为这是我在其他地方用 JS 做的事情导致文档失去焦点。当我找到它时，我会发布我的解决方案。

更新 3：

该问题是由 Ajax Control Tookit 的 ModalPopupExtender 引起的。我在调用网络服务后使用一条作为加载消息。当回调方法被触发时它会被隐藏。

我可以在字段之间切换，直到第一次显示和隐藏模态弹出窗口。此后，表单将永远无法保持焦点。我正在调查原因，如果我能找出原因，我会发布答案。

谢谢！

原文

I have a page in a site that contains an iframe with a form in it. I can't change this but I do have full control over all of the JS that runs in the parent page and the iframe'd page.

My problem is that when I have a form field focused in the iframe'd document, tabbing to the next field sends the cursor straight up to the address bar of the browser, not the next field in the form. Setting tabindexes on each of the fields doesn't help.

The browser is treating the entire iframe itself as one of the elements in the page (as it should), but I'm wondering if there's a way to capture the tab events and force focus to stay inside of the iframe and with its child elements.

Have any of you run into this issue before and have a way around it?

Not that it will help you, but the layout is something like:

+-------------------------------------------+
| Parent page                               |
|         +-------------------------------+ |
|  N      | iframe                        | |
|  a      |                               | |
|  v      | Has about 50 fields that I'd  | |
|  i      | like to be able to tab between| |
|  g      |                               | |
|  a      | But I can't! Help!            | |
|  t      |                               | |
|  i      +-------------------------------+ |
|  o                                        |
|  n                                        |
+-------------------------------------------+

One idea was to try and capture the keydown events in the iframe, check for tab or shift+tab and then refocus the iframe, but then there's the problem of knowing which field I was on before losing focus. Is there a way to dynamically focus the next field using JS and the tabindex attribute on the form fields? Perhaps that's where I venture next...

Update: perhaps there's something even simpler that I'm missing. For example, the login box on http://www.studentloan.com is an iframe and I can tab between those fields just fine. Maybe something else in my JS is causing the problem.

Update 2: I tried loading just the iframe document in the browser as a standalone page and I still can't tab. I think it's something I'm doing in JS somewhere else that's causing the document to lose focus. I'll post my solution when I find it.

Update 3:

The problem is caused by the Ajax Control Tookit's ModalPopupExtender. I'm using one as a loading message after calling a webservice. It gets hidden when the callback method is fired.

I can tab between the fields until the Modal popup is shown and hidden for the first time. After that, the form can never keep its focus. I'm investigating why and will post an answer if I can find out why.

Thanks!

分享到QQ

分享到微博