keydownの使い方
keydownは、キーボードのキーが押された時に処理を実行出来ます。
以下は、例です。
【keydown利用例】
<form>
<input type="text" id="test-keydown1">
</form>
<script>
var x1 = document.getElementById("test-keydown1");
x1.addEventListener("keydown", function(){alert("テストです");}, false);
</script>
赤字部分でkeydownイベントを登録しています。
実行例は、以下の通りです。
テキスト入力欄でキーを押すと、アラートが表示されます。尚、日本語入力やShift、Alt、Ctrlキーもイベントになります。
又、複数のテキスト入力欄があった場合、<form>を対象にすると(id="test-keydown1"をformに記載)全てのテキスト入力欄がイベント対象になります。
keydownとkeypressの違いですが、keydownが日本語入力やShift、Altキーでイベントになるのに対し、keypressではイベントになりません。
テキストエリアでの利用例
keydownはテキストエリアでも使えます。
【テキストエリアでの利用例】
<form>
<textarea id="test-keydown2"></textarea>
</form>
<script>
var x2 = document.getElementById("test-keydown2");
x2.addEventListener("keydown", function(){alert("テストです");}, false);
</script>
実行例は、以下の通りです。
キーの判別
押されたキーを判別して処理させる事も出来ます。以下は、例です。
【エンターキーでのサブミットを無効化する】
<form>
<input type="text" id="test-keydown3">
</form>
<script>
function func1(x) {
if ( x.keyCode == 13 ) {
x.preventDefault();
}
}
var x3 = document.getElementById("test-keydown3");
x3.addEventListener("keydown", func1, false);
</script>
赤字部分でxは、イベントオブジェクトを参照しています。キーが押されたというイベントです。青字部分でキーのコードからエンターキーかを判定しています。エンターキーのコードは13です。ブラウザによっても違いますが、基本はASCIIコードが使われます。緑部分は、エンターキーであればサブミットしないようにしています。
実行例は、以下の通りです。
通常は、テキスト入力欄でエンターキーを押すと、サブミットされてページがリロードされますが、上記では無効化しているためリロードされません。実行ボタン(タイプがsubmit)を付けると、サブミットします。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
<br>等を除いた多くのタグでサポートされています。