社内でブラウザを使ったイントラネット(グループウェアもどき)を開発しています。
Tabキーを押した際の動きが制御できず困っています。
ページの表示時に最初にフォーカスを設定したいフィールドに
カーソルを置くことはうまくできています。
(onload="document.name.hoge.focus"にて)
ただ、このあとTabキーを押していくと、
自フォーム内の項目だけを移動するのではなく、
ブラウザのタブなどに移動してしまいますし、
フォーカスがどこにあるのか探さないとわからないことがあります。
つまり、
Aフィールド→Bフィールド→Cボタン→Aフィールド→Bフィールド→…
とTabキ押下の繰り返しでページ内の項目だけを
移動するような動きにさせたいのですが、
web上でいろいろ調べても、これまた行き詰っています。
ブラウザのタブに飛んでしまうのは仕様なのかな、と思いつつ、
何とか実現できないものか悩んでいます。
どうかお知恵の拝借をよろしくお願いいたします。
ブラウザはIEを使用しており、クローズしたネットワーク内の
イントラネットですので他のブラウザを使用することはありません。
No.2ベストアンサー
- 回答日時:
tabindexがユニークに設定されている前提であればこう
<script>
window.addEventListener('DOMContentLoaded', function(e){
var tabs=[].map.call(document.querySelectorAll('[tabindex]'),function(x){
return parseInt(x.getAttribute("tabindex"));
}).sort();
var min=tabs.shift();
var max=tabs.pop();
document.querySelector('[tabindex="'+max+'"]').addEventListener('keydown',function(e){
if(e.keyCode=="9" && !e.shiftKey){
e.preventDefault();
document.querySelector('[tabindex="'+min+'"]').focus();
};
});
document.querySelector('[tabindex="'+min+'"]').addEventListener('keydown',function(e){
if(e.keyCode=="9" && e.shiftKey){
e.preventDefault();
document.querySelector('[tabindex="'+max+'"]').focus();
};
});
});
</script>
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="button" tabindex="3" value="go">
素晴らしい!ありがとうございます。
scriptの解析を後回しにして、
とりあえずお教えいただいたソースをそのまま組み込んだだけで
完璧に望んだ動きをしてくれました。
感謝、感謝です。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 エクスプローラで希望の場所が表示できない 2 2023/06/29 15:19
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- その他(ブラウザ) ブラウザでの音量(YouTubeなどの視聴)が自動的に下がってしまう。(できれば直したいです。) 2 2023/07/15 08:52
- Excel(エクセル) セルの値をグーグルで検索するエクセルVBAについて! 2 2022/08/01 21:41
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- au(KDDI) 「カメラへのアクセスを許可してください」のせいで年齢確認書類を撮影できない、アップロードできない 2 2022/11/01 00:04
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- その他(データベース) 更新クエリをリンクデータベーステーブルに実行し実行時エラー3362固有インデックスに重複する値が含ま 1 2022/09/21 11:44
- マウス・キーボード テンキーの設定がおかしくなっています。 5 2023/08/09 15:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript window.openで開く...
-
webページ上のTabキーの動き
-
ブックマークレットの() 背景...
-
XMLでのAttributeを持ったNode...
-
javascriptの基本的なことだと...
-
投稿画像の確認画面
-
responseTextについて
-
ラジオボタンでreadonlyの切替え
-
codejump 模写コーディングgall...
-
同じIDで定義した要素の配列を...
-
javascriptでiframeのURL変更は?
-
ボタンをクリックすると数が増...
-
jspからjavascriptの変数引継ぎ
-
functionから別のfunctionを実...
-
C#で、ContextMenuStripに動的...
-
クリックすると上に開くアコー...
-
画像上のクリックした場所が分...
-
undefinedを表示させない方法は...
-
var_dumpのdump意味はを知りた...
-
hoge の謎
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
乗換案内 VBAで操作したい
-
onClickイベントの変更方法
-
TexでΣの添え字の位置直し
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
サブウィンドウに背景色をつけ...
-
XMLでのAttributeを持ったNode...
-
excle VBA とweb上の検索を利用...
-
javascriptのdocument.allにつ...
-
スマホでフォームにフォーカス...
-
Null またはオブジェクトではあ...
-
ラジオボタンでreadonlyの切替え
-
文字がマウスカーソルを追従す...
-
LaTeX:数式を等号揃えにする方法
-
選択によってsubmitボタンの色...
-
UWSCでオンクリックのボタンを...
-
VBAのIE操作でframe構造のサイ...
-
DOM要素を削除しても、イベント...
-
webページ上のTabキーの動き
おすすめ情報


大変失礼いたしました。
tabindexは設定しています。
tabindex指定した最後のフィールドorボタンに移動した、そのあとなのです。
質問の例で言うと
Aフィールド(tabindex="1")→Bフィールド(tabindex="2")→
Cボタン(tabindex="3")→どこかへ???
なのです。
ブラウザのアドレスバーにも飛びますし、上記の例でいうところの
tabindex="3"のあとにtabindex="1"に戻るものではないのでしょうか?
説明が不足しており申し訳ございません。
よろしくお願いいたします。