JavaScript イベントハンドラのonkeydownを使ってキーコードを取得する方法
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122
書式
document.getElementById(“セレクターID名").onkeydown = function(e) {
if(e.key == “Enter") //Enterキー
if(e.key == “Backspace") //Backspaceキー
getElementByIdメソッドとイベントハンドラのonkeydownを使用すればキーコードを取得できます。
使用例
<!DOCTYPE html> <html> <body> <input id="user" type="text" value="山田" maxlength="10" autocomplete="off"> <script> // onkeydownイベント document.getElementById("user").onkeydown = function(e) { // Enterキーのイベント if(e.key ==="Enter"){ console.log("Enterキーが押されました"); return false; } //Backspaceキーのイベント if (event.key === "Backspace"){ console.log("Backspaceキーが押されました"); return false; } } </script> </body> </html>
実行結果
テキストボックスに「Enterキー」を入力すろと、onkeydownイベントが発生します。 コンソールに「Enterキーが押されました」というメッセージが表示されます。 テキストボックスに「Backspaceキー」を入力すろと、onkeydownイベントが発生します。 コンソールに「Backspaceキーが押されました」というメッセージが表示されます。