jQuery API の keyup( fn ) は、キーアップイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
指定した要素内で、押し下げたキーボタンを上げると、keyup( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . keyup( イベンドハンドラ );
「セレクター」の要素のキーアップイベントに、「イベンドハンドラ」をバインド。
実装例(サンプル)
実装例(サンプル)の動作について
入力欄をフォーカスし、キーボードの何れかのキーボタンを押すと、入力欄の背景色を黄色に変える。入力欄内でキーボタンを上げると、元の白色の背景色の入力欄に戻る。
日本語変換中のキーを押す操作にも反応する。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-keydown' ) . keydown( function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
jQuery( '#jquery-api-keydown' ) . keyup( function() {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-keydown' ) . keydown( function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
jQuery( '#jquery-api-keydown' ) . keyup( function() {
jQuery( this ) . css( 'backgroundColor', '#ffffff' );
} );
} );
// -->
</script>
HTML
<input id="jquery-api-keydown" type="text" />