keypress/JavaScript

イベントリスナーのkeypressについて説明します。

keypressの使い方

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

 以下は、例です。

【keypress利用例】
<form>
<input type="text" id="test-keypress1">
</form>

<script>
var x1 = document.getElementById("test-keypress1");
x1.addEventListener("keypress", function(){alert("テストです");}, false);
</script>

 赤字部分でkeypressイベントを登録しています。

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

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

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

 keypressとinputの違いですが、ShiftやAltキーでイベントにならないのは同じですが、inputは日本語入力の場合はイベントになります。

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

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

【テキストエリアでの利用例】
<form>
<textarea id="test-keypress2"></textarea>
</form>

<script>
var x2 = document.getElementById("test-keypress2");
x2.addEventListener("keypress", function(){alert("テストです");}, false);
</script>

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

キーの判別

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

【数字のみ入力を受け付ける】
<form>
<input type="text" id="test-keypress3">
</form>

<script>
function func1(x) {
    if ( x.charCode < 48 || x.charCode > 57 ) {
        alert("数字のみ入力可能です");
        x.preventDefault();
    }
}

var x3 = document.getElementById("test-keypress3");
x3.addEventListener("keypress", func1, false);
</script>

 赤字部分で、xにはキーが押されたというイベントオブジェクトが渡されます。青字部分で、キーのコードから数字以外かを判定しています。数字のコードは48から57です。基本はASCIIコードが使われます。緑部分は、イベントのキャンセルです。このため、数字以外が入力されると、アラートと共に入力したキーは無効になります。

 以下は、実行例です。

サポート

・サポートするブラウザ

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

【サポートするブラウザ】
機種 ブラウザ サポート
パソコン Chrome
Safari
Firefox
Microsoft Edge
Internet Explorer v9以上
スマートフォン Chrome
Safari
Firefox

・サポートするタグ

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

  • このエントリーをはてなブックマークに追加