JavaScript - キーボード入力時に処理を呼び出す

keyup

keyup イベントはキーが離されたときに発生します。

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keyup", event => {
  console.log("キーが離されました。");
});
keyup イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

keydown

keydown イベントはキーが押されたときに発生します。

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keydown", event => {
  console.log("キーが押されました。");
});
keydown イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

keypress

keypress イベントはキーが文字が入力されたときに発生します。

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keypress", event => {
  console.log("文字が入力されました");
});
keypress イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

入力されたキーを調べる

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keyup", event => {
  // 出力例は「a」を押下したとき
  console.log(event.key);         // a
  console.log(event.code);        // KeyA
  console.log(event.altKey);      // false
  console.log(event.ctrlKey);     // false
  console.log(event.shiftKey);    // false
  console.log(event.metaKey);     // false
  console.log(event.repeat);      // false
  console.log(event.isComposing); // false
});
keyup イベント
event.key
押下されたキーの値を文字列で返します。
event.code
押下されたキーのコードを文字列で返します。
event.altKey
Alt キーが押されたかどうかを Boolean で返します。
event.ctrlKey
Ctrl キーが押されたかどうかを Boolean で返します。
event.shiftKey
Shift キーが押されたかどうかを Boolean で返します。
event.metaKey
meta キー(Windows なら Windows キー、Mac なら Command キー)が押されたかどうかを Boolean で返します。
event.repeat
キーが押され続けているかどうかを Boolean で返します。
event.isComposing
入力が未確定(日本語入力の場合に入力中で確定していない状態)かどうかを Boolean で返します。(未確定の場合は true

ただし Keypress イベントは、キー入力時に文字が生成する場合に発生します。そのため、Alt、Ctrl、Shift、Enter を押下したときには発生しません。日本語入力の場合は入力を確定させるために Enter を押下する必要があるため、Keypree ではイベントを取得できません。

関連記事