jQuery API の keydown() は、キーダウンイベントを実行するメソッド。キーダウンイベント時の、ブラウザのデフォルト動作と、keydown( fn )などでバインドしたイベントハンドラを実行する。キーダウンイベントとは、キーを押すイベントのこと。
「A要素のイベント時に、B要素のキーダウンイベントを実行させたい」時などに便利だ。
記述方法
jQuery( セレクター ) . keydown();
「セレクター」の要素のキーダウンイベントを実行する。
実装例(サンプル)
実装例(サンプル)の動作について
「keydown()」ボタンをクリックすると、テキスト入力欄の背景色を黄色に変える。「keyup()」ボタンをクリックすると、テキスト入力欄の背景色を白色に戻す。
テキスト入力欄をフォーカスし、キーボードの何れかのキーボタンを押すと、テキスト入力欄の背景色を黄色に変える。テキスト入力欄内でキーボタンを上げると、元の白色の背景色の入力欄に戻る。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-keydown' ) . click( function() {
jQuery( '#jquery-api-input' ) . keydown();
} );
jQuery( '#jquery-api-keyup' ) . click( function() {
jQuery( '#jquery-api-input' ) . keyup();
} );
jQuery( '#jquery-api-input' ) . keydown( function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
jQuery( '#jquery-api-input' ) . keyup( function() {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-keydown' ) . click( function() {
jQuery( '#jquery-api-input' ) . keydown();
} );
jQuery( '#jquery-api-keyup' ) . click( function() {
jQuery( '#jquery-api-input' ) . keyup();
} );
jQuery( '#jquery-api-input' ) . keydown( function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
jQuery( '#jquery-api-input' ) . keyup( function() {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-input {
margin: 0;
background-color: white;
}
-->
</style>
<!--
#jquery-api-input {
margin: 0;
background-color: white;
}
-->
</style>
HTML
<p>
<button id="jquery-api-keydown">keydown()</button>
<button id="jquery-api-keyup">keyup()</button>
</p>
<p><input id="jquery-api-input" type="text" /></p>
<button id="jquery-api-keydown">keydown()</button>
<button id="jquery-api-keyup">keyup()</button>
</p>
<p><input id="jquery-api-input" type="text" /></p>