【Tabキー】特定の範囲内でフォーカスを循環させる方法
- HTMLサイトのフォーカスを、TabキーまたはShift＋Tab押下で特定の範囲内で循環させる方法を紹介します。
- Tabindex指定では意図した順番には移動することができますが、最後のTabが押されても最初に戻ることはできません。
- そこで、onkeydownを使用してShift＋Tabの動作を実現する方法についても説明します。
- ベストアンサー
【Tabキー】特定の範囲内だけでフォーカスを循環
お世話になります。 javascript初心者のため、的外れな質問をしていましたらすみません。 HTMLサイトのフォーカスを、TabキーまたはShift＋Tab押下で特定の範囲内で循環させたいと考えております。 イメージ的には、サイトのメニューにあたる部分（リンク）をぐるぐるループしてくれれば・・・と思うのですが。 Tabindex指定ですと、意図した順番には移動してくれますが、最後のTabが押されても最初に戻ることはできませんし・・・ そう思ってonkeydownで制御しようと思ったのですが、Shift＋Tabの動作をどう実現していいのか分かりませんでした。 言葉足らずで申し訳ありませんが、ご回答宜しくお願い致します。
- atoris
- お礼率92% (23/25)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
れすがつかないね～。 これでよいのかまったくわかりません。 （めもりーりーくとか、そのたもろもろ・・・） できるなら、たのひとのあどばいすがほしいです。 ぜんかくくうはくは、はんかくにしてね ２だんめのあんかーにふぉーかすをあてるには、 まうすでどらっぐしてほかのばしょではなす？。 はんたいまわりは、てぬきしました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <form action="#"> <p id="pp"> <a href="#">abc</a> <a href="#">abc</a> <a href="#">abc</a> </p> <p id="qq"> <a href="#">abc</a> <a href="#">abc</a> <a href="#">abc</a> </p> <p id="rr"> <a href="#">abc</a> <a href="#">abc</a> <a href="#">abc</a> </p> <p>a</p> </form> <script type="text/javascript"> //@cc_on var Kurukuru = (function ( createListener, get, next ) { return function ( id ) { var listener = createListener( id, get, next ); document.getElementById( id )./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'keydown', listener, true); }; })( function ( tid, get, next ) { return function (evt) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var keyCode = evt./*@if( @_jscript ) keyCode @else@*/ which /*@end@*/; var shift = evt.shiftKey; var p, c; if( 'A' !== e.nodeName ) return; if( !shift && keyCode == 9 ) { if( p = get( next( e ), 'id', tid ) ) return; evt./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/; (p = next( e.parentNode )) && p.focus(); } }; }, function (node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; }, function ( n ) { var e; while (n) { e = n.firstChild || n.nextSibling if (! e) { do { if ((n = n.parentNode) && n.nodeName == 'BODY') return null; } while (! (e = n.nextSibling)) } n = e; if( 1 === n.nodeType && 'A' == n.nodeName ) return n; } return null; } ); Kurukuru('pp'); Kurukuru('qq'); Kurukuru('rr'); </script>
関連するQ&A
- tabキーによるfocusの当たり方を制御したい
こんにちは，よろしくお願いします。 formが設置してあるページで，tabキーを押すとfocusが移動しますが，この挙動が，ブラウザによって違うことに気づきました。 ドリームウィーバーで，レコードの挿入ウィザードを使って簡単にフォームを設置することができますが，たとえば，この単純なページをInternet Explorerで開いて，１回tabキーを押してみると，focusは，ブラウザのアドレスバーに行ってしまいます。しかし，Firefoxでは，フォームの１番目のテキストボックスにfocusが当てられ一番最後にブラウザのアドレスバーなどに行きます。また，OperaではFirefoxと同様にフォームの１番目のテキストから始まって，ブラウザにはfocusが渡りません。 FirefoxやOperaのようにフォームの１番目の項目からfocusがあたるようにしたいのですが，どのようにすればよいのでしょうか？ gooやYahooを上記の３つのブラウザで開いてみると，必ず同じ挙動を示して，同じところからfocusが当たりますから，何らかの方法で制御する方法があるのだと思うのですが…。 tabindexを設定して，フォームの１番目の項目を１として，順に設定してみたりしたのですが，Internet Explorerでは，やはり一番先にブラウザにfocusが渡ってしまいました。 私の希望としては，Opera のように一切ブラウザにfocusが当たらないようにしたいのです。しかし，できないのであれば，Internet Explorerで一番最初にブラウザにfocusが当たらないようにする方法を教えていただきたいです。 当方，JavaScriptとPHPにてホームページを作成中です。よろしくお願いします。
- ベストアンサー
- HTML
- タブダイアログのフォーカスの移動について
タブダイアログを使った場合の フォーカスの移動についての質問です。 状態としましては フォームにタブ数３のタブダイアログがあり、 それぞれのタブに３つテキストボックスがあります。 また、タブダイアログとは別にフォーム上に 閉じるボタンが１つあります。 現在１つ目のタブの１つ目のテキストボックスに フォーカスがあり、Tabキーでフォーカスを 移動させていくのですが、 ３つ目のテキストボックスでtabキーを押すと フォーカスがどこに行ったのか 行方不明になってしまいます。 なぜか２つ目と３つ目のタブの ３つ目のテキストからは 閉じるボタンへフォーカスが移動するのですが、 １つ目のテキストだけが行方不明になってしまいます。 （shift+tabで戻ってきません） また、３つ目のタブのキャプションからの フォーカス移動も行方不明となってしまうます。 タブインデックスは タブダイアログボックスが０ １つ目のタブの１つ目のテキストが１ １つ目のタブの２つ目のテキストが２ １つ目のタブの３つ目のテキストが３ ２つ目のタブの１つ目のテキストが４ ・ ・ ３つ目のタブの３つ目のテキストが９ 閉じるボタンが１０ となっています。 タブダイアログのフォーカス移動を制御するには どうしたら良いのでしょうか？ また、行方不明になってしまうフォーカスの 現在位置を見つけるようなことはできますでしょうか？ よろしく回答のほどお願いします。
- ベストアンサー
- Visual Basic
- ホームページ内でＥｎｔｅｒキー押下時にフォーカスを移動したい
イントラネットでホームページの管理をしています。 個人認証画面にてユーザー→パスワードを入力してもらい、認証ボタンを押してメインページへ飛ぶ画面があります。 ユーザー入力後にEnterキー押下でパスワードへ、 パスワード入力後にEnterキー押下で認証ボタンへ それぞれフォーカスを移動したいのですが、実現方法がわかりません。 javascriptでfocus()及びblur()を使えばと思いましたが、キー入力イベントの取得方法がわかりません。 ページ先頭にてdocument.onkeydownから取得する方法だと初回のみの取得しか出来ませんでした。 それぞれのオブジェクトでキー入力のイベント判定をしてフォーカスを移動する方法があれば教えてください。 ＯＳ ：WIN2K ブラウザ：NetScape4.0 PG ：HTML(ASP,VBScript,JavaScript)
- 締切済み
- HTML
- vbで[ctrl]+[tab]を認識させるにはどうしたらよいでしょうか？
はじめまして、どうしてもうまくいきません。教えてくださいませ。 [ctrl]+[tab]キー入力を認識させるにはどうしたら良いでしょうか？ 現在、VBでMDIフォームを使用してプログラムを作っております。 [ctrl]+[tab]キー入力を行なうと、子フォーム間でフォームの移動が起こってしまいます。CommandButton押下時にのみ、フォームの移動を行なうようにしたいので、 [ctrl]+[tab]キー入力を制御して実現させようとしているのですが、うまくいきません。 MSDNライブラリには、KeyUpとKeyDownのイベントで Tabキーの操作は発生しないと書いてありました。。。 何か方法がありましたらお教えいただけると助かります。 どうぞよろしくお願いします。
- ベストアンサー
- Visual Basic
- 数字キーでのフォーカス制御について（FlashLite1.1）
flash初心者です。 flash lite1.1についてご質問させて下さい。 ただいま，学習を踏まえて簡単なボタン選択肢（ボタンオブジェクト）を操作できるflashを作成しています。 サウンドノベルを想像していただければ分かりやすいと思います。 選択肢が，１フレームに縦２～５個程度表示され，その選択肢を数字キーの８でフォーカス上へ，数字キーの２でフォーカスが下へ移動するものを考えています。（デフォルトのフォーカスは選択肢の最上部） フォーカスが最上部にきたときに８を押下してもそれ以上上がないので何も反応せず，２も同様に最下部まできたときに２を押下しても反応はなしです。なお，上下キーは使わない想定です。 色々ネットで調べるとliteではフォーカスの制御ができないようで困っています。 ASを利用して座標でコントロールするのが主流のようですが，変動する選択肢数に対して，どのように座標をコントロールすればよいか検討がつかない状態です。 勉強不足といえばそれまでですが，なんとか実現できる方法があれば助かります。
- ベストアンサー
- Flash
- JavaScriptでtabindexの変更って可能？
タイトルどおりなんですが、tabindexの値の変更はJavaScriptからできるのでしょうか？ tabキーでフォーカスが当たらないように、ある条件のときに-1を設定したいのですが・・。よろしくお願いします。
- ベストアンサー
- JavaScript
- ラジオボタンのtabindex = -1について
画面に配置されたラジオボタンにおいて マウス以外からの操作を無効にしたいと考えています。 (タブでの移動を不可としたい。) そこで、ラジオボタン部分にtabindex=-1を付加しましたが、 うまくいきません。 (順番は変更できるようですが。) 最終的にtabでのフォーカスがあたってしまいます。 これは、もうjavascriptで強制的に制御するしかないのでしょうか？
- ベストアンサー
- JavaScript
- [Javascript]エンターキー押下でＴＡＢキーコード送出！
こんにちは。 エンターキーで複数のテキストフィールドを移動するというような質問は多く出ていまして、私もそれを参考に画面を作っています。 今回私が悩んでいますのが、エンターキーの押下でＴＡＢキーと同じ動きをさせたいのです。 理由はいろいろありまして、そのうちの１つがTABINDEXを有効にしたいという点です。 これはエンターキーとＴＡＢに限ったことではなく、例えば「Ａ」の入力で画面には「Ｂ」と表示するとか・・・。色々使い方はあると思いますが。 是非とも宜しくお願い致します。
- ベストアンサー
- JavaScript
- タブ切替ボタンからのフォーカス移動について
いつもお世話になっています。 VisualStudio2005,Vistaで開発しています。 タブコントロールのタブ切替ボタンにフォーカスが当たっている状態で左右キーを押すと、 隣のボタンにフォーカスが移ると共にアクティブなタブが変更されます。 その状態でTabキーを押すと、該当タブページの先頭オーダーを持つコントロールにフォーカスが移りますが、 これと同じ動作を下キー、Enterキーで実現したいと考えています。 テキストボックス等ではkeypressイベント、keydownイベントでフォーカス制御ができましたが、 どうもうまくいきません。 個々のタブページでは両イベントが発生せず、タブコントロール本体ではイベント自体は起きるものの、 コンボボックスの内容を変更するために押した下キーにすら反応してしまいます。 何か良い解決方法はありませんでしょうか。 皆様のお知恵をお貸しいただけましたら幸いです。
- ベストアンサー
- Visual Basic
- 自動フォーカス遷移時にどのような仕様にするべきか
住所等の入力欄に規定の文字数が入力された時に次の入力欄に自動でフォーカス遷移をする実装を作ったのですが、 規定文字数が入力されてるボックスにShift+Tabで戻り遷移をしようとすると、一旦フォーカスが戻った後にキーを離したタイミングで次の項目に遷移してしまう挙動となってしまいます。 javascriptを用いた自動遷移を紹介してるブログの例でも同様の挙動となっていますが、これはユーザービリティの観点としてあまりよくないのでは無いかと個人的に感じてしまいます。 かといってTabとShiftをそのボックス内で入力された時は無効としてしまうと、逆に次の項目にTabで遷移したい時に反応しなくなってしまいます。 何か良い解決策はないでしょうか？ 参考したサイトは以下になります。 http://wakalog.hatenadiary.jp/entry/2017/11/02/131504 https://web-designer.cman.jp/javascript_ref/keyboard/nextfield/
- 締切済み
- JavaScript
お礼
お礼が遅くなり申し訳ありませんでした。 投げっぱなしの質問だったにも関わらず、丁寧なご回答をどうも有難う御座いました。 自分の勉強不足を反省し、こちらのソースを参考に作成させて頂きたいと思います。 本当に有難う御座いました。