C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Javascriptのタブキー制御について


(過去ログ 139 を表示中)

[トピック内 1 記事 (1 - 1 表示)]  << 0 >>

■81775 / inTopicNo.1)  Javascriptのタブキー制御について
  
□投稿者/ bobo (1回)-(2016/11/12(Sat) 16:30:31)

分類:[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はタブ無効にしたい。

よろしくお願いします。
引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -