onkeypressとは？初心者にも分かる使い方と実例の解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

onkeypressとは？

onkeypress は、ウェブページの要素に文字を入力する際、キーボードのキーが押された瞬間に発生するイベントのことです。初心者向けには「何かを検知して処理を走らせる仕組み」と覚えると分かりやすいです。

ただし、現在は 非推奨 になる場合が多く、代わりに onkeydown や onkeyup を使うのが一般的です。これらはキーが押された瞬間や離された時の状態を安定して拾えるため、実務でも広く使われています。

onkeypress の基本的な使い方

HTML の要素に onkeypress 属性を付けて JavaScript の関数を呼ぶ形が基本です。簡単な例として、次のように書くことが多いです。<input type="text" onkeypress="handleKey(event)" /> このとき handleKey は外部のスクリプトで定義しますが、ここでは説明だけに留めます。

onkeydown と onkeyup との違い

onkeypress は「文字が入力される直前のイベント」として扱われることが多いですが、現在の実装では必ずしもすべての環境で同じように動作するわけではありません。対して onkeydown はキーが押された瞬間、onkeyup はキーが離された時に発生します。よって文字の検出や処理を安定させたい場合は onkeydown/ onkeyup を使い、必要に応じて入力文字の取得には別の方法を組み合わせます。

次に、実務でのポイントを簡単に整理します。

イベント名	意味
onkeypress	文字入力の開始時に発生することが多いが、環境依存で動作が揺れやすい
onkeydown	キーが押された瞬間に発生。方向キーや機能キーも拾える
onkeyup	キーが離された時に発生。入力後の文字を検知するのに安定

結論としては、初心者には onkeydown と onkeyup を中心に学び、必要に応じて文字取得の方法を補足するのがおすすめです。

よくある質問

Q: onkeypress は今でも使えますか？ A: 一部環境で挙動が異なるため、推奨は別のイベントです。

まとめ

このコラムの要点をもう一度まとめます。onkeypress は文字入力を検知する古いイベントですが、現代のウェブ開発では安定性の点から onkeydown と onkeyup の使用が推奨されます。基本の使い方は HTML 要素に onkeydown/onkeyup の属性を付け、必要な処理を関数として用意するだけです。表で比較すると、どのイベントがどの場面で適しているかが見やすくなります。初心者の方はまず onkeydown と onkeyup の使い方を練習し、onkeypress は補足的な理解として持っておくと良いでしょう。

onkeypressの同意語

onkeypress: キーが押されたときに発火するイベントを処理するHTML属性名
keypressイベント: キーを押したときに発生するイベントの名称。JavaScriptでこのイベントを捕捉して処理を記述する対象
キー押下イベント: ユーザーがキーボードのキーを押した時に発生するイベントの総称
キー入力イベント（文字キー）: 文字キーを押したときに発生するイベントのカテゴリ。入力時の処理を設定できる
文字キー押下イベント: 文字キーを押した際に発生するイベントの表現
文字キーを押した時のイベント: 文字キーを押した瞬間にイベントが発生することを指す表現
キーを押した時のイベントハンドラ: キー押下時に呼び出される処理を指す表現
keypressイベントハンドラ: keypressイベントが発生したときに実行される処理を指す表現
onkeypress属性: HTML属性名としてのonkeypressの別表現

onkeypressの対義語・反対語

onkeyup: キーを離したときに発生するイベント。onkeypress が“キーを押して文字を入力する瞬間”を扱うのに対し、onkeyup は“キーを離した瞬間の変化”を検知します。
onkeydown: キーを押し始めたときに発生するイベント。キーを押し下げた瞬間の処理を扱い、連続したキー入力の検知にも使われます。
oninput: 入力値が変更されたときに発生するイベント。onkeypress が押下そのものを検知するのに対し、実際の値の変化を通知します。
onchange: 入力値が変更され、フォーカスを外したときに発生するイベント。変更の最終確定を検知する用途に使われます。
onfocus: 要素がフォーカスを得たときに発生するイベント。キーボード入力を開始する準備が整った状態を知らせます。
onblur: 要素がフォーカスを失ったときに発生するイベント。入力中の状態から別の状態へ移行したことを知らせます。

onkeypressの共起語

onkeydown: キーが押された瞬間に発生するイベント。文字入力以外のキーにも反応でき、現代的な実装でよく使われる。
onkeyup: キーが離された瞬間に発生するイベント。入力の終端検知や連携処理に使われる。
onkeypress: 文字が入力されるときに発生するイベントだが現在は非推奨になるケースが多く、代わりに onkeydown/onkeyup を使うのが推奨される。
keydown: キーが押された瞬間を検知するイベント。keydown は最初に発生するイベントの代表格。
keyup: キーを離した瞬間を検知するイベント。入力の確定や後処理に使われる。
keypress: 文字が入力されるタイミングを検知するイベント。ブラウザ差があるため最新の実装では使用を避ける傾向。
KeyboardEvent: キーボード入力に関する情報を格納するイベントオブジェクト。key、code、altKey、ctrlKey などのプロパティを持つ。
イベント: ユーザー操作に対して反応する出来事。キーボードイベントはこのカテゴリの一つ。
イベントオブジェクト: イベント発生時にハンドラへ渡されるデータを格納するオブジェクト。KeyboardEvent の場合は特有のプロパティを持つ。
event: イベントハンドラの第一引数として渡されるオブジェクト。実体は KeyboardEvent のインスタンス。
イベントリスナー: イベントが発生したときに実行する関数。addEventListener で登録するのが一般的。
イベントハンドラ: イベント発生時に実行される処理を指す言い換え。
addEventListener: DOM 要素にイベントリスナーを登録する標準的な方法。onkeypress の代替として広く使われる。
removeEventListener: 登録したイベントリスナーを削除する方法。リソース管理に重要。
preventDefault: イベントのデフォルト動作を抑制する。例: Enter キーの送信を防ぐ時などに使う。
stopPropagation: イベントのバブリングを止め、親要素のイベントハンドラを呼ばないようにする。
key: KeyboardEvent のプロパティの一つで、押されたキーを文字列で返す。例: 'a', 'Enter'。
code: KeyboardEvent のプロパティ。物理的なキーを表すコードで、'KeyA' や 'Enter' などを返す。
keyCode: 古いプロパティで、数値コードを返す。現在は非推奨。
which: かつてのキーコードを返すプロパティ。現在は非推奨。
charCode: 文字コードを返す古いプロパティ。非推奨。
入力: 文字を入力するための領域で発生するキーイベントの総称。
テキスト入力: 文字を入力する場面に関わるイベント要素やケース。
フォーカス: 入力可能な要素にカーソルが合わさっている状態。キーボードイベントは通常フォーカスされた要素で起きる。
HTML属性: onkeydown などのHTML 属性としてイベントハンドラを設定する方法。
DOM: Document Object Model。ページの要素とイベントはこの仕組みで結びつく。
ブラウザ互換: 異なるブラウザ間でキーイベントの実装差があるため、テストと互換対応が必要。
アクセシビリティ: キーボード操作はアクセシビリティの要。すべての操作をキーボードで行えるよう配慮する。
aria: ARIA 属性は支援技術とキーボード操作の補助情報を提供する。

onkeypressの関連用語

onkeypress: 文字を入力するキーを押したときに発火する古いイベント。文字入力を扱う際に使われますが、現代では keydown/keyup の使用が推奨されます。
keydown: キーを押した瞬間に発火するイベント。文字キーも非文字キーも含め、ショートカット検出に向いています。
keyup: キーを離したときに発生するイベント。入力の完了を検知したいときに使います。
KeyboardEvent: キー入力に関する情報を持つイベントオブジェクトの型。event.key/ event.code などのプロパティを使います。
Event: すべてのイベントの基本オブジェクト。KeyboardEvent はこの派生です。
event.key: 押されたキーの意味を示す文字列。文字キーは文字、特殊キーは Enter などの名前が返ります。
event.code: 押された物理キーボードのキー位置を示すコード。KeyA/Digit1/ArrowLeft など、キーボードの配置に依存します。
event.keyCode: 古い表現のキーコード。現在は非推奨で、代わりに event.key や event.code を使います。
event.charCode: 古い文字コード。非推奨。
event.which: 古いブラウザ互換用の値。非推奨。
addEventListener: イベントを登録する現代的な方法。onkeypress 属性より推奨されます。
attachEvent: 古いInternet Explorerのイベント登録方法。現代のコードでは使用を避けます。
preventDefault: イベントのデフォルト動作を抑制します。例えば入力を抑制したいときに使います。
stopPropagation: イベントの伝搬を止めます。親要素への伝播を防ぎたいときに使います。
target: イベントが発生した元の要素を指します。
currentTarget: イベントリスナーが現在実行されている要素を指します。
repeat: キーを長押ししたときに true になるプロパティ。連続入力の判定に使えます。
altKey: Altキーが押されているかどうかの真偽値。
ctrlKey: Ctrlキーが押されているかどうかの真偽値。
shiftKey: Shiftキーが押されているかどうかの真偽値。
metaKey: MacのCommandキーなど、修飾キーが押されているかの真偽値。
isComposing: IME入力中かどうかを示すフラグ。日本語入力などで重要です。
compositionstart: IMEによる入力が開始されたときに発火します。
compositionupdate: IMEの入力内容が更新されるときに発火します。
compositionend: IME入力が確定したときに発火します。
input: 入力内容が変化したときに発生するイベント。リアルタイムの検知に使われることが多いです。
contenteditable: 要素を編集可能にする属性。キー入力イベントと組み合わせて使われます。
textarea: 複数行のテキスト入力フィールド。onkeypressやkeydown/keyupのイベントがよく使われます。
printableCharacter: 表示可能な文字（文字キー）を指します。
nonPrintableKey: 表示に文字を直接描画しない特殊キー（Enter、Backspace、矢印キーなど）。
crossBrowser: ブラウザ間の挙動差を吸収するためのポイント。特に key と code の扱いには差が出やすいです。
React onKeyPress: Reactでキー入力を扱うイベントハンドラ。onKeyPress を使いますが状況に応じて onKeyDown/OnKeyUp を使うことも。
Vue v-on:keypress: Vue.jsでキー入力を拾うディレクティブ。v-on:keypress を使います。
jQuery .keypress(): jQueryでキー入力イベントを扱う古い手法。現在は他のイベントAPIの利用が推奨されます。