onkeydownイベント(キーダウンイベント)とは、キーボードの何れかのキーを押した時のイベント。
構文
HTML
<element onkeydown="イベントハンドラ">
例
INPUT要素
<input type="text" onkeydown="イベントハンドラ" />
JavaScript
object.onkeydown = 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" onkeydown="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" ).onkeydown = function(){
sample2getValue();
};
}
function sample2getValue() {
var $sample2value = document.getElementById( "sample2input" ).value;
document.getElementById( "sample2output" ).innerHTML = $sample2value;
}
</script>
window.onload = function () {
document.getElementById( "sample2input" ).onkeydown = 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>