onkeypress

onkeypressの基本的な使い方

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

以下は、利用例です。

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

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

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

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

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

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

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

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

<script>
const x = document.querySelector("#test-keypress");
x.onkeypress = 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.onkeypress = func1;
</script>

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

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

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

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

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

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

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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