單擊時搜索光標

Question

我有一個搜索框，其值爲「搜索...」。 目前，用戶必須先刪除它，然後才能鍵入任何內容。 當單擊框時，搜索文本如何消失？ 謝謝

Answer 1

您需要將焦點和模糊事件處理程序附加到搜索框才能發生。這是你如何能做到這jQuery中：

var defaultText = "Enter your search term"; 
$('#searchBoxId').focus(function(){ 
    if(this.value == defaultText) 
     this.value = ''; 
}); 
$('#searchBoxId').blur(function(){ 
    if(this.value == '') 
     this.value = defaultText; 
}); 

頁面加載後，只是使搜索框有「輸入搜索詞」作爲它的值。

Answer 2

這是一個默認值，如果你可以使用JavaScript（jQuery的），這裏有一個功能：

JQUERY

<script type="text/javascript"> 
    (function($){ 
     $.fn.clearDefault = function(){ 
      return this.each(function(){ 
       var default_value = $(this).val(); 
       $(this).focus(function(){ 
        if ($(this).val() == default_value) $(this).val(""); 
       }); 
       $(this).blur(function(){ 
        if ($(this).val() == "") $(this).val(default_value); 
       }); 
      }); 
     }; 
    })(jQuery); 
    $('input.clear-default').clearDefault(); 
</script> 

HTML

<input class="clear-default" type="text" value="search..." name="search_box"> 

Answer 3

如果你搜索谷歌對於「Unobtrusive JQuery搜索框」，這裏有很多文章。基本上你從搜索開始：[TextBox]。這適用於JavaScript禁用的人。然後使用JQuery（或諸如此類），隱藏「搜索」DOM元素並將該文本置於「文本框」內，然後將jquery方法附加到onfocus和blur事件以根據需要處理刪除/添加默認文本。