onkeyupイベント

onkeyupイベント(キーアップイベント)とは、キーボードの何れかのキーを放した時のイベント。

構文

HTML

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

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

JavaScript

object.onkeyup = 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" onkeyup="sample1getValue();" /></p>
<p>入力欄のテキスト:<span id="sample1output"></span></p>

サンプル2

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

入力欄のテキスト:

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

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

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

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sample2input" ).onkeyup = 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, イベント, キーボードイベント, リファレンス パーマリンク