📂プログラミング

JavaScriptでショートカットで入力フィールドにアクセスする例

ショーケース

最初の入力欄:

2番目の入力欄:

キーボードで1を押すと最初の入力欄にカーソルが移動し、2を押すと2番目の入力欄にカーソルが移動する。下で詳しく説明するが、1を押した場合、最初の入力欄にすぐに1が入力されるのがわかる。これを防ぐために2番目の入力欄では event.preventDefault() メソッドを使って入力を防止している。

コード

HTML

<label for="input1">첫 번째 입력칸:</label>
<input type="text" id="input1"><br><br>

<label for="input2">두 번째 입력칸:</label>
<input type="text" id="input2"><br><br>

• <label> タグは少なくともこの例では重要な要素ではない。
• <input> タグの id 属性を通して JavaScript の getElementById().focus() メソッドが動作する。

javascript

<script>
    document.addEventListener("keydown", function(event) {
        if (event.key === "1") {  
            document.getElementById("input1").focus();
        } else if (event.key === "2") {  
            event.preventDefault();  // 2 입력 방지
            document.getElementById("input2").focus();
        }
    });
</script>

• document.addEventListener の第一引数である "keydown" によってキーボードが押されたときにイベントが実行される。
• event.key と比較する文字列を変更することでショートカットを変更できる。
• event.preventDefault() がないとショートカットを押したときに入力欄に該当する文字が入力される。これを防止するためのメソッドだ。
• document.getElementById(id).focus() メソッドはその id を持つ要素にフォーカスを与える。