JavaScript でタブキーの押下を検出して処理する
JavaScript には、キーボードのキー押下を検出するための組み込みメソッドと、これらのイベントを処理するための複数の方法があります。コード全体でイベントリスナーを設定できます。これは、正しい要素が選択された場合にのみ目的のイベントが発生するようにするための優れた方法です。
とは言うものの、特定のキーボードキーには、ほとんどのブラウザ、そして実際にはほとんどのオペレーティングシステムで事前に定義された機能があります。たとえば、ほとんどのブラウザでF1を使用するとヘルプページが開き、F5キーを押すと現在のページが更新されます。
同じことが Tab キーにも当てはまります。これは、ほとんどのブラウザでハイパーリンクとテキストボックスを循環するために使用されます。ただし、JavaScript を使用してこのイベントを検出し、Tab キーが押されるたびに特定のアクションを実行できます。たとえば、選択したハイパーリンクを使用して何かを実行したり、ユーザーがタブを使用してテキスト入力に切り替えるたびにテキスト入力のプロパティを変更したりすることができます。
Tab キーのイベントリスナーを追加する方法の例を次に示します。
JavaScript で Tab キーが押されたことを検出するイベントリスナーを作成する
<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>
document.addEventListener('keyup', detectTabKey);
function detectTabKey(e) {
if (e.keyCode == 9) {
activeElem = document.activeElement;
console.log(activeElem.href);
}
}
出力：
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
上記の JavaScript コードには、次の 2つの作業部分があります。
document.addEventListener()メソッドは 2つの引数を取ります。リッスンするイベントの種類（この場合はkeyupイベント）と、イベントが発生したときに実行する関数です。引き金になった。- カスタムの
detectTabKey()関数は、イベントのキーコードがTabキーのキーコードと同じであるかどうかをチェックします。一致する場合は、コンソールへのハイパーリンクを出力します。
ロジックを追加して、<a> 要素のみがイベントリスナーをトリガーするようにする
以前の方法ですでに問題を発見している方もいらっしゃるかもしれません。ウェブページに入力テキストボックスがある場合はどうなりますか？その場合、Tab キーを押すとそれらも循環し、href 属性がないため、関数は意図したとおりに機能しません。
ありがたいことに、その場合、JavaScript はエラーをスローしませんが、テキスト入力が選択されるたびに undefined を出力します。これが起こらないようにするには、detectTabKey() 関数にステップを追加する必要があります。
HTML コードに新しい要素を追加しましょう。
<a href="https://www.delftstack.com/">Test Link 1</a>
<a href="https://www.delftstack.com/contact/">Test Link 2</a>
<a href="https://www.delftstack.com/about-us/">Test Link 3</a>
<input type="text" placeholder="Text Box">
以前と同じ JavaScript コードを保持すると、出力は次のようになります。
出力：
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
undefined
これを修正するには、detectTabKey() 関数に別の if ステートメントを追加する必要があります。最終的なコードは次のとおりです。
document.addEventListener('keyup', detectTabKey);
function detectTabKey(e) {
if (e.keyCode == 9) {
activeElem = document.activeElement;
if (activeElem.tagName.toLowerCase() == 'a') {
console.log(activeElem.href);
}
}
}
出力：
"https://www.delftstack.com/"
"https://www.delftstack.com/contact/"
"https://www.delftstack.com/about-us/"
テキストボックスは、新しい条件を満たしていないため、アクティブな要素として選択されている場合でも関数をトリガーしません。そのため、現在アクティブな要素に a タグが付加されている場合にのみ、コードは href 属性を出力します。また、.toLowerCase() メソッドを追加して、要素を見逃さないようにしました。