onkeypressイベント

onkeypressイベント(キープレスイベント)とは、キーボードの何れかのキーを押した時のイベント。

構文

HTML

<element onkeypress="イベントハンドラ">

INPUT要素
<input type="text" onkeypress="イベントハンドラ" />

JavaScript

object.onkeypress = function(){ イベントハンドラ };

サンプル1

HTMLドキュメント上でイベントハンドラを登録するサンプル。

最後に入力した文字以外のテキスト:

サンプル1の動作について

テキスト入力欄にキーボードのキーを押して入力すると、「最後に入力した文字以外のテキスト:」の右横に、最後に入力した文字以外のテキストを表示する。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function sample1getValue() {
    var $sample1value = document.getElementById( "sample1input" ).value;
    document.getElementById( "sample1output" ).innerHTML = $sample1value;
}
</script>

HTML

<p><input type="text" id="sample1input" onkeypress="sample1getValue();" /></p>
<p>最後に入力した文字以外のテキスト:<span id="sample1output"></span></p>

サンプル2

JavaScript上で動的にイベントハンドラを登録するサンプル。

最後に入力した文字以外のテキスト:

サンプル2の動作について

テキスト入力欄にキーボードのキーを押して入力すると、「最後に入力した文字以外のテキスト:」の右横に、最後に入力した文字以外のテキストを表示する。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sample2input" ).onkeypress = function(){
        sample2getValue();
    };
}
function sample2getValue() {
    var $sample2value = document.getElementById( "sample2input" ).value;
    document.getElementById( "sample2output" ).innerHTML = $sample2value;
}
</script>

HTML

<p><input type="text" id="sample2input" /></p>
<p>最後に入力した文字以外のテキスト:<span id="sample2output"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, キーボードイベント, リファレンス パーマリンク