2016/4/25更新

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

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

onkeydownイベント

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

HTML

<element onkeydown="処理">

1	<element onkeydown="処理">

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

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

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

JavaScript

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

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

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

HTML

<element onkeypress="処理">

1	<element onkeypress="処理">

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

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

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

JavaScript

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

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

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

HTML

<element onkeyup="処理">

1	<element onkeyup="処理">

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

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

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

JavaScript

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

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

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

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

JavaScript