Element: keypress イベント

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

keypress イベントは、文字値を生成するキーが押下されたときに発行されます。

文字値を生成するキーの例としては、アルファベットキー、数字キー、区切り記号キーが挙げられます。文字値を生成しないキーの例としては、 Alt, Shift, Ctrl, Meta のような修飾キーが挙げられます。

警告: このイベントは非推奨になりましたので、代わりに beforeinput または keydown を使用してください。

構文

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

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

onkeypress = (event) => {};

イベント型

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

Event UIEvent KeyboardEvent

イベントプロパティ

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

KeyboardEvent.altKey 読取専用

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

KeyboardEvent.code 読取専用

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

警告: これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置(ホーム行の上の行の中央付近)でキーを押した場合、ユーザーが QWERTZ キーボード(これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる)または Dvorak キーボードレイアウト(これはユーザーが "F" を期待する)であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 Keyboard.getLayoutMap() を使用してください。

KeyboardEvent.ctrlKey 読取専用

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

KeyboardEvent.isComposing 読取専用

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

KeyboardEvent.key 読取専用

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

KeyboardEvent.locale 読取専用

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

メモ: このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

KeyboardEvent.location 読取専用

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

KeyboardEvent.metaKey 読取専用

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

KeyboardEvent.repeat 読取専用

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

KeyboardEvent.shiftKey 読取専用

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

addEventListener による keypress の例

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

html
<div>
  <label for="sample"
    >この入力欄にフォーカスを当てて、何か入力してください。</label
  >
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>
js
const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

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

onkeypress による同等の例

js
input.onkeypress = logKey;

仕様書

Specification
UI Events
# event-type-keypress
HTML Standard
# handler-onkeypress

ブラウザーの互換性

BCD tables only load in the browser

関連情報

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