Element: keypress イベント
非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
keypress
イベントは、文字値を生成するキーが押下されたときに発行されます。
文字値を生成するキーの例としては、アルファベットキー、数字キー、区切り記号キーが挙げられます。文字値を生成しないキーの例としては、 Alt, Shift, Ctrl, Meta のような修飾キーが挙げられます。
警告: このイベントは非推奨になりましたので、代わりに beforeinput
または keydown
を使用してください。
構文
イベント名を addEventListener()
などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
addEventListener("keypress", (event) => {});
onkeypress = (event) => {};
イベント型
KeyboardEvent
です。 Event
から継承しています。
イベントプロパティ
このインターフェイスには親である UIEvent
や Event
から継承したプロパティもあります。
KeyboardEvent.altKey
読取専用-
論理値で、このキーイベントが発生した際に Alt (macOS の場合は Option または ⌥)キーが押されていれば
true
を返します。 KeyboardEvent.code
読取専用-
文字列で、このイベントが表す物理キーのコード値を返します。
警告: これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置(ホーム行の上の行の中央付近)でキーを押した場合、ユーザーが QWERTZ キーボード(これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる)または Dvorak キーボードレイアウト(これはユーザーが "F" を期待する)であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、
Keyboard.getLayoutMap()
を使用してください。 KeyboardEvent.ctrlKey
読取専用-
論理値で、そのキーイベントが発生した際に Ctrl キーが押されていれば
true
を返します。 KeyboardEvent.isComposing
読取専用-
論理値で、このイベントが
compositionstart
とcompositionend
の間に発生したものであれば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
値を記録します。
<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;
仕様書
Specification |
---|
UI Events # event-type-keypress |
HTML Standard # handler-onkeypress |
ブラウザーの互換性
BCD tables only load in the browser