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>
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>
<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>
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>
<p>入力欄のテキスト:<span id="sample2output"></span></p>