keyup()

jQuery API の keyup() は、キーアップイベントを実行するメソッド。キーアップイベント時の、ブラウザのデフォルト動作と、keyup( 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>

CSS

<style type="text/css">
<!--
#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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, キーボード・イベント パーマリンク