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>
<!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>
<!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キーが押されました」というメッセージが表示されます。
テキストボックスに「Enterキー」を入力すろと、onkeydownイベントが発生します。
コンソールに「Enterキーが押されました」というメッセージが表示されます。
テキストボックスに「Backspaceキー」を入力すろと、onkeydownイベントが発生します。
コンソールに「Backspaceキーが押されました」というメッセージが表示されます。
テキストボックスに「Enterキー」を入力すろと、onkeydownイベントが発生します。 コンソールに「Enterキーが押されました」というメッセージが表示されます。 テキストボックスに「Backspaceキー」を入力すろと、onkeydownイベントが発生します。 コンソールに「Backspaceキーが押されました」というメッセージが表示されます。