|
分類:[JavaScript]
今、Jqueryを用いたページでタブキー操作の制御で悩んでいます。
画面ではカラーパレットなど外部ライブラリを組み込んだりしていて、表示されていない(Onload時にカラーパレットのオブジェクトを作っていたりしてhtml上は存在していてると思われる)にもかかわらず、タブ移動でどこかの要素が有効になっているらしく、画面上からフォーカスが当たっている所が消えてしまいます。
調べるとdivでもhtml5であればtabindexを指定することでフォーカスを当てさせる事は可能なようですが、ブラウザ(Chrome)がデフォルトで認識するタブの要素はどういうものがあるのでしょうか？
また、一旦画面上の全要素に対し、タブ無効を設定するにはどうしたらいいでしょうか？
tabindex=-1で消せるみたいですが、子画面(モーダル)も要しており、親画面の要素のみをタブ移動が効かないようにできればしたいと思ってます。
(tabindex=-1を設定してしまうと元あったタブIndexがもとに戻せなくなってしまうため)
ちなみに消したい要素の親divはそれぞれ存在し、そのエリアの下要素はjQueryのセレクタを使えば捕まえられると思います。
<body>
<div id="area1">
<input id='text1' type='text' tabindex='100'>
<input id='text2' type='text' tabindex='101'>
<input id='text3' type='text' tabindex='102'>
</div>
<div id="area2">
<input id='text4' type='text' tabindex='200'>
<input id='text5' type='text' tabindex='201'>
<input id='text6' type='text' tabindex='202'>
</div>
<div id="area3">
<input id='text7' type='text' tabindex='300'>
<input id='text8' type='text' tabindex='401'>
<input id='text9' type='text' tabindex='502'>
</div>
</body>
area1が表示されてるときは、area2,area3はタブ無効にしたい。
よろしくお願いします。
|