Element: keypress イベント

構文

イベント名を addEventListener() などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。

addEventListener("keypress", (event) => {});

onkeypress = (event) => {};

イベント型

KeyboardEvent です。 Event から継承しています。

イベントプロパティ

このインターフェイスには親である UIEvent や Event から継承したプロパティもあります。

KeyboardEvent.altKey 読取専用

論理値で、このキーイベントが発生した際に Alt （macOS の場合は Option または ⌥）キーが押されていれば true を返します。

KeyboardEvent.code 読取専用

文字列で、このイベントが表す物理キーのコード値を返します。

KeyboardEvent.ctrlKey 読取専用

論理値で、そのキーイベントが発生した際に Ctrl キーが押されていれば true を返します。

KeyboardEvent.isComposing 読取専用

論理値で、このイベントが compositionstart と compositionend の間に発生したものであれば true を返します。

KeyboardEvent.key 読取専用

文字列で、このイベントが表すキーのキー値を表します。

KeyboardEvent.location 読取専用

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、キーボード上の位置にあります。

KeyboardEvent.metaKey 読取専用

論理値で、このキーイベントが発生した際に Meta キー（Mac キーボードでは ⌘ Command キー、 Windows キーボードでは Windows キー (⊞)）が押されていれば true を返します。

KeyboardEvent.repeat 読取専用

論理値で、このキーが押し続けられて自動リピートしている場合に true を返します。

KeyboardEvent.shiftKey 読取専用

論理値で、このキーイベントが発生した際に Shift キーが押されていれば true を返します。

例

addEventListener による keypress の例

この例では、 <input> 要素内でキーを押したときに、 KeyboardEvent.code 値を記録します。

<div>
  <label for="sample">この入力欄にフォーカスを当てて、何か入力してください。</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>

const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

onkeypress による同等の例

input.onkeypress = logKey;

仕様書

ブラウザーの互換性

関連情報

• 同様にこのイベントのターゲットとなる Document インターフェイス。
• 関連イベント:
  • input
  • keydown
  • keyup