Pourquoi ne puis-je pas tabuler entre les éléments de formulaire dans un iframe?

Question

J'ai une page dans un site qui contient un iframe avec un formulaire dedans. Je ne peux pas changer cela mais j'ai un contrôle total sur tous les JS qui s'exécutent dans la page parente et la page iframe'd. Mon problème est que lorsque j'ai un champ de formulaire focalisé dans le document iframe'd, tabulation vers le champ suivant envoie le curseur directement à la barre d'adresse du navigateur, pas le champ suivant dans le formulaire. Définir tabindexes sur chacun des champs n'aide pas.

Le navigateur traite l'ensemble de l'iframe comme l'un des éléments de la page (comme il se doit), mais je me demande s'il existe un moyen de capturer les événements tabulation et de forcer le focus à rester dans l'iframe avec ses éléments enfants.

L'un d'entre vous a-t-il déjà rencontré ce problème?

Non pas que cela vous aidera, mais la mise en page est quelque chose comme:

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

Une idée était d'essayer de capturer les événements keydown dans l'iframe, vérifiez l'onglet ou Maj + onglet, puis recentrer la iframe, mais il y a aussi le problème de savoir dans quel domaine j'étais avant de perdre le focus. Existe-t-il un moyen de focaliser dynamiquement le champ suivant en utilisant JS et l'attribut tabindex sur les champs de formulaire? Peut-être que est là que je hasarde à côté ...

Mise à jour: peut-être il y a quelque chose encore plus simple que je me manque. Par exemple, la boîte de connexion sur http://www.studentloan.com est un iframe et je peux onglet entre ces champs très bien. Peut-être que quelque chose d'autre dans mon JS cause le problème.

Mise à jour 2: J'ai essayé chargement tout le document iframe dans le navigateur comme une page autonome et je ne peux toujours pas l'onglet. Je pense que c'est quelque chose que je fais dans JS ailleurs, ce qui fait que le document perd son attention. Je posterai ma solution quand je la trouverai.

Mise à jour 3:

Le problème est causé par ModalPopupExtender du contrôle Ajax Tookit. J'en utilise un comme un message de chargement après avoir appelé un webservice. Il est masqué lorsque la méthode de rappel est déclenchée.

Je peux tabuler entre les champs jusqu'à ce que le popup Modal soit affiché et caché pour la première fois. Après cela, la forme ne peut jamais garder son focus. J'étudie pourquoi et posterai une réponse si je peux savoir pourquoi.

Merci!

Answer 1

J'ai eu presque le même problème que vous. Après beaucoup de temps à la recherche d'une solution j'ai trouvé ce site web où j'ai pu découvrir ce qui me causait ce problème: le modalpopupextender. Une fois que j'ai su quel était le vrai problème, il était assez facile de trouver la solution.Le voici: http://forums.asp.net/t/1191142.aspx

J'espère que cela vous aidera à comprendre ce problème comme il l'a fait pour moi.

Answer 2

J'imagine qu'utiliser ajax est hors de question?

Si ce n'est pas le cas, vous n'avez pas les problèmes de tabulation iframe car votre formulaire fait partie de la page en cours.