webページ上のTabキーの動き

社内でブラウザを使ったイントラネット（グループウェアもどき）を開発しています。

Tabキーを押した際の動きが制御できず困っています。
ページの表示時に最初にフォーカスを設定したいフィールドに
カーソルを置くことはうまくできています。
（onload="document.name.hoge.focus"にて）
ただ、このあとTabキーを押していくと、
自フォーム内の項目だけを移動するのではなく、
ブラウザのタブなどに移動してしまいますし、
フォーカスがどこにあるのか探さないとわからないことがあります。
つまり、
Ａフィールド→Ｂフィールド→Ｃボタン→Ａフィールド→Ｂフィールド→…
とTabキ押下の繰り返しでページ内の項目だけを
移動するような動きにさせたいのですが、
web上でいろいろ調べても、これまた行き詰っています。
ブラウザのタブに飛んでしまうのは仕様なのかな、と思いつつ、
何とか実現できないものか悩んでいます。
どうかお知恵の拝借をよろしくお願いいたします。

ブラウザはIEを使用しており、クローズしたネットワーク内の
イントラネットですので他のブラウザを使用することはありません。

質問者からの補足コメント

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

    補足日時：2019/05/20 11:42

No.2 ベストアンサー 回答者： yambejp 回答日時： 2019/05/20 12:33

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の解析を後回しにして、
とりあえずお教えいただいたソースをそのまま組み込んだだけで
完璧に望んだ動きをしてくれました。
感謝、感謝です。ありがとうございました。

お礼日時：2019/05/20 16:30

No.1 回答者： yambejp 回答日時： 2019/05/20 11:21

tabindex