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

キーボード入力時に処理を呼び出す: keyup

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

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keyup", event => {
  console.log("キーが離されました。");
});
keyup イベント

キーボード入力時に処理を呼び出す: keydown

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

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keydown", event => {
  console.log("キーが押されました。");
});
keydown イベント

キーボード入力時に処理を呼び出す: keypress

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

const textarea = documentgetelementbyid("textarea");

textarea.addEventListener("keypress", event => {
  console.log("文字が入力されました");
});
keypress イベント

入力されたキーを調べる

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 ではイベントを取得できません。