JavaScriptのキーボードの入力を受け取る方法

キーボードのイベントには「onkeydown」「onkeypress」「onkeyup」の3種類あります。

onkeydownイベント

ユーザーがキーを押したときにイベントが発生します。

書き方

HTML

<element onkeydown="処理">

例:input要素に対してイベントが発生するようにさせた場合

<input type="text" onkeydown="処理" />

JavaScript

object.onkeydown = function(){ 処理 };

onkeypressイベント

ユーザーがキーを押して離したときにイベントが発生します。

HTML

<element onkeypress="処理">

例:input要素に対してイベントが発生するようにさせた場合

<input type="text" onkeypress="処理" />

JavaScript

object.onkeypress = function(){ 処理 };

onkeyupイベント

ユーザーがキーを離したときにイベントが発生します。

HTML

<element onkeyup="処理">

例:input要素に対してイベントが発生するようにさせた場合

<input type="text" onkeyup="処理" />

JavaScript

object.onkeyup = function(){ 処理 };


通常イベントの発生する順番は。onkeydown → onkeypress → onkeyup の順ですが、ブラウザによって若干異なります。

また、この3つのイベントは(イベント名).keyCodeプロパティでキーコードと呼ばれる、キーボードの文字を数字に変換したもの取得することができます。


イベント

2017/12/05(火)
Design Thinking Square