onkeypress/JavaScript

onkeypressの使い方

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

　以下は、例です。

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

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

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

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

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

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

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

<form>
<textarea onkeypress="alert('テストです');"></textarea>
</form>

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

キーの判別

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

<script>
function func1(x) {
    if ( x.charCode < 48 || x.charCode > 57 ) {
        alert("数字のみ入力可能です");
        return x.charCode == 0;
    }
}
</script>
<form>
<input type="text" onkeypress="return func1(event);">
</form>

　赤字部分で、キーのコードから数字以外かを判定しています。数字のコードは48から57です。基本はASCIIコードが使われます。青字部分は、数字以外であればコードを0としてヌルに置き換えています。このため、数字以外が入力されると、アラートと共に入力したキーは無効になります。

　以下は、実行例です。

　尚、WindowsXPでサポートしているInternet Explorer 8以下では、charCodeがundefinedになります。この場合、keyCodeを使います。x.charCode == undefined && (x.keyCode < 48 || x.keyCode > 57)も判定に加えると、Internet Explorer 8でも対応可能になります。

サポート

・サポートするブラウザ

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

・サポートするタグ

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

「イベントハンドラ一覧」に戻る