onkeydown

onkeydownの基本的な使い方

イベントハンドラのonkeydownは、要素内でキーボードのキーが押された時に処理を実行できます。

以下は、利用例です。

<input type="text" id="test-keydown">

<script>
const x = document.querySelector("#test-keydown");
x.onkeydown = function(){alert('テストです');};
</script>

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

テキスト入力欄でキーを押すと、アラートが表示されます。なお、日本語入力、Shift、Alt、Ctrl、BSキーなどでもイベントが発生します。

onkeydownとoninputの違い

onkeydownとoninputの違いですが、日本語入力でもイベントになるのは同じですが、oninputはShiftやAltキーでイベントになりません。oninputは、表示の変更があった時をイベントとするため、BS(バックスペース)はイベントになります。

oninputは、マウスでコピー&ペーストしてもイベントになりますが、onkeydownはイベントになりません。

このため、以下のように使い分けます。

onkeydown

AltやShift、エンターキーなど含め、キーが押された時に処理したい。

oninput

コピー&ペースト含め、input、select、textarea要素などの値に変更があった時に処理したい。

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

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

<textarea id="test-keydown"></textarea>

<script>
const x = document.querySelector("#test-keydown");
x.onkeydown = function(){alert('テストです');};
</script>

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

キーの判別

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

<input type="text" id="test-keydown">

<script>
function func1(event) {
  if ( event.key === "Enter" ) {
    alert("テストです");
  }
}

const x = document.querySelector("#test-keydown");
x.onkeydown = func1;
</script>

赤字のevent.key === "Enter"で、エンターキーかを判定しています。

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

エンターキーを押すと、アラートが表示されます。

正規表現を使って、数字であれば処理をするなどもできます。その際、マウスでコピー&ペーストした時も処理したい時は、oninputを利用してください。

HTMLの属性として記述する(非推奨)

onkeydownは、HTMLの属性としても記述できます。

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

inputタグで、onkeydown属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。