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='';
    }
  });

这里使用了两个事件处理函数：.blur() 和 .focus()。

.blur() —— 处理对象失去焦点（光标离开输入框）事件。当输入框为空时，我们在其中插入“搜索”这个文字。

.focus() —— 处理对象获得焦点（光标进入输入框）事件。当输入框中有“搜索”这个文字时，我们将其清空。