单击时搜索光标

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事件以根据需要处理删除/添加默认文本。