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