onkeydown/JavaScript

イベントハンドラのonkeydownについて説明します。

onkeydownの使い方

　onkeydownは、キーボードのキーが押された時に処理を実行出来ます。

　以下は、例です。

【onkeydown利用例】

<form>
<input type="text" onkeydown="alert('テストです');">
</form>

　実行例は、以下の通りです。

　テキスト入力欄でキーを押すと、アラートが表示されます。尚、日本語入力やShift、Alt、Ctrlキーもイベントになります。

　又、複数のテキスト入力欄があった場合、<form>にonkeydownを記述すると全てのテキスト入力欄がイベント対象になります。

　onkeydownとonkeypressの違いですが、onkeydownが日本語入力やShift、Altキーでイベントになるのに対し、onkeypressではイベントになりません。

　onkeydownはテキストエリアでも使えます。

【テキストエリアでの利用例】

<form>
<textarea onkeydown="alert('テストです');"></textarea>
</form>

　実行例は、以下の通りです。

　押されたキーを判別して処理させる事も出来ます。以下は、例です。

【エンターキーでのサブミットを無効化する】

<form>
<input type="text" onkeydown="if(event.keyCode == 13){return false;}">
</form>

　赤字部分でキーのコードからエンターキーが押されたかを判定しています。エンターキーのコードは13です。ブラウザによっても違いますが、基本はASCIIコードが使われます。青字部分は、エンターキーであればサブミットしないようにしています。

　以下は、実行例です。

　通常は、テキスト入力欄でエンターキーを押すと、サブミットされてページがリロードされますが、上記では無効化しているためリロードされません。実行ボタン(タイプがsubmit)を付けると、サブミットします。

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　<br>や<iframe>等を除いた多くのタグでサポートされています。