jQuery と Drupal。レッスン 7。jQuery の検索フィールド、Focus と Blur イベント

あなたは間違いなく「検索」というテキストの検索フィールドを見たことがあるでしょう。そのフィールドをクリックすると、「検索」という単語が消え、自分の検索クエリを入力できるようになります。以下は jQuery でこれを行うためのスニペットです。

$('#search-block-form .form-text').val('検索');

$('#search-block-form .form-text').blur(function(){
     if(this.value==''){
       this.value='検索';
     }
  });
  $('#search-block-form .form-text').focus(function(){
    if(this.value=='検索'){
      this.value='';
    }
  });

この場合、2 つのイベント ハンドラー .blur() と .focus() を使用します。

.blur() — オブジェクトからフォーカス（テキスト カーソル）が削除されるイベントを処理します。このイベントにより、フィールドが空の場合、「検索」をフィールドに挿入します。

.focus() — オブジェクトにフォーカスが置かれるイベントを処理します。このイベントにより、フィールドに「検索」というテキストがある場合、値を空のままにします。