keypress

keypressの基本的な使い方

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

以下は、利用例です。

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

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

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

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

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

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

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

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

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

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

キーの判別

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

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

<script>
function func1(event) {
  if ( /\D/i.test(event.key) ) {
    alert("数字のみ入力可能です");
    event.preventDefault();
  }
}

const x = document.querySelector("#test-keypress");
x.addEventListener("keypress", func1);
</script>

赤字の/\D/i.test(event.key)で、数字以外(\D部分)かを判定しています。数字以外の場合は、アラートを表示するとともに、青字のevent.preventDefault()でイベントをキャンセルしてキーが押されなかったことにしています。

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

英字を入力すると、アラートが表示されるとともに、キー入力は無効になります。

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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