この記事では、JavaScript でタブ キーを検出する方法について説明します。
JavaScript で Tab キーを検出する方法は?
JavaScript でタブ キーを検出するには、次の手法を適用します。
- 「 querySelector() ' 方法
- 「 getElementbyId() ' 方法
前述のアプローチを 1 つずつデモンストレーションします。
方法 1: document.querySelector() メソッドを使用して JavaScript のタブ キーを検出する
「 document.querySelector() 」メソッドが CSS セレクターに一致する最初の要素にアクセスし、次に addEventListener() メソッドがアクセスされた要素にイベント ハンドラーを追加します。これらのメソッドを適用して、入力タイプにアクセスし、値が入力されたときにタブ キーが押されたかどうかを検出できます。
構文
エレメント。 addEventListener ( イベント 、 関数 、 useCapture )
指定された構文では、「 イベント 」はイベント名、「 関数 」は、イベントが発生したときに実行する特定の関数であり、「 useCapture 」はオプションの引数です。
資料。 クエリセレクター ( CSS セレクター )上記の構文では、「 CSS セレクター 」は、document.querySelector() メソッドで指定できる 1 つ以上の CSS セレクターを参照します。
記載されている概念をよりよく理解するには、次の例を参照してください。
例
まず、入力タイプを「 文章 」の初期プレースホルダー値と「
< h2 > 結果 < / h2 >
次に、「 document.querySelector() 」 指定された入力と見出しにそれぞれアクセスし、「」という名前の変数に保存するメソッド 入力 ' と ' 結果 」：
入力させて = 資料。 クエリセレクター ( '入力' ) ;結果を出す = 資料。 クエリセレクター ( 'h2' ) ;
次に、「 キーダウン 」 addEventListener() メソッドを使用して入力フィールドでイベント。このイベントは、「 タブ 」 キーは、「 内部テキスト ' 財産：
入力。 addEventListener ( 「キーダウン」 、 ( と ) => {もしも ( と。 鍵 === 'タブ' ) {
結果。 内部テキスト = 「タブキーが押されました」 ;
} そうしないと {
結果。 内部テキスト = 「タブキーが押されていません」 ;
}
この場合、ユーザーがタブ キーを押すと、追加された は実行されたアクションについて通知します。
方法 2: document.getElementbyId() メソッドを使用して JavaScript でタブ キーを検出する
「 document.getElementById() 」メソッドを使用して、ID に基づいて特定の HTML 要素にアクセスできます。このメソッドを実装して、入力フィールドを取得し、タブ キーなどの特定のキーが押されるたびにユーザーに警告するイベントを追加できます。
構文
資料。 getElementById ( 要素 )指定された構文では、「 要素 」は、指定された要素の id を参照します。
次の例の概要を見てみましょう。
例
次の例では、前の方法で説明したように、入力タイプとプレースホルダー値を含めます。
ここで、「 document.getElementById() ' 方法。
let input= document.getElementById(“tab”);
最後に、「」という名前のイベントを追加します キーダウン 」を addEventListener() メソッドで使用すると、「 タブ 」キーが押された：
入力。 addEventListener ( 「キーダウン」 、 ( と ) => {もしも ( と。 鍵 === 'タブ' ) {
アラート ( 「タブキーが押されました」 ) ;
}
} ) ;
出力
JavaScript でタブ キーを検出する最も簡単な方法をすべて説明しました。
結論
JavaScript でタブ キーを検出するには、「 addEventListener() ' とともに ' document.querySelector() ” 入力タイプを取得し、指定されたキーを検出するためのイベントを適用するメソッドまたは “ getElementbyId() 」 ID に基づいて入力フィールドをフェッチし、追加された条件が満たされるたびにユーザーに通知するメソッド。このブログでは、JavaScript でのタブ キーの検出について説明しました。