フォームを含むiframeを含むページがサイトにあります。これを変更することはできませんが、親ページとiframeページで実行されるすべてのJSを完全に制御できます。
私の問題は、iframeのドキュメントにフォーカスされたフォームフィールドがある場合、次のフィールドにタブで移動すると、フォームの次のフィールドではなく、ブラウザのアドレスバーにカーソルが直接移動することです。各フィールドにタブインデックスを設定しても役に立ちません。
ブラウザはiframe全体をページ内の要素の1つとして扱っていますが(そうあるべきです)、タブイベントをキャプチャし、フォーカスを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 |
+-------------------------------------------+
1つのアイデアは、iframeでキーダウンイベントをキャプチャし、タブまたはShift + Tabを確認してから、iframeのフォーカスを再設定することでしたが、フォーカスを失う前に、どのフィールドにいるかを知るという問題があります。JSとフォームフィールドのtabindex属性を使用して、次のフィールドに動的にフォーカスする方法はありますか?おそらくそれは私が次に冒険するところです...
更新: おそらく、私が見逃しているさらに単純なものがあります。たとえば、 http: //www.studentloan.comのログインボックスはiframeであり、これらのフィールド間をうまく移動できます。たぶん私のJSの他の何かが問題を引き起こしています。
更新2:ブラウザにiframeドキュメントのみをスタンドアロンページとしてロードしようとしましたが、タブを使用できません。これは、JSで他の場所で行っていることで、ドキュメントのフォーカスが失われていると思います。解決策が見つかったら投稿します。
アップデート3:
この問題は、AjaxControlTookitのModalPopupExtenderが原因で発生します。Webサービスを呼び出した後、ロードメッセージとして使用しています。コールバックメソッドが起動されると非表示になります。
モーダルポップアップが初めて表示および非表示になるまで、フィールド間をタブで移動できます。その後、フォームはフォーカスを維持できなくなります。理由を調査しており、理由がわかれば回答を投稿します。
ありがとう!