Why can't I tab between form elements within an iframe?

Question

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.

Thanks!

Answer 1

I imagine using ajax is out the question?

If it's not, then you don't have the iframe tabbing issues as your form is part of the current page.

Answer 2

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.

Answer 3

Hi Corey, I had almost the same problem as you. After a lot of time looking for a solution I found this web where I could discover what was causing me this problem: the modalpopupextender. Once I knew what was the real problem, it was pretty easy find the solution. Here it is: http://forums.asp.net/t/1191142.aspx

I hope it helps you to understand this problem as it did for me.