Jquery在聚焦时返回默认输入值答案

【问题标题】：Jquery return default input value when focusing outJquery在聚焦时返回默认输入值
【发布时间】：2011-05-26 06:17:30
【问题描述】：

我有一个默认值为“搜索”的搜索输入。

当我专注于输入时，值会清除。

$(document).ready(function(){
    $('#search').focus(function() {           
        if($(this).val() == "Search for") 
        $(this).val('');
    });
});

如果您不输入任何要搜索的内容，那么在聚焦时返回默认“搜索”值的好方法是什么？

【问题讨论】：

标签： javascript jquery forms search input

【解决方案1】：

这里有一小段代码供您参考。它将使用 jQuery 数据方法来保存一个布尔值，表明用户已经输入了一些东西。如果此人没有输入任何内容，它将再次显示文本。

$("#search").blur(function() {
    if (!$(this).data('hasTyped')) {
        $(this).val('Search for');
    }
}).keyup(function() {
    $(this).data('hasTyped', this.value.length);
}).focus(function() {
    if (!$(this).data('hasTyped')) {
        $(this).val('');
    }
});

示例：http://jsfiddle.net/jonathon/dbbBh/

【讨论】：

1up 例如！谢谢！但是，您的代码有 1 个缺点。清除用户输入后，“搜索”将不再出现。
:) 已排序 - 只是将数据设置为值的长度，而不是 true。如果该值的长度为零，则将hasTyped 设置为假值

【解决方案2】：

如果您已经在使用 jQuery，为什么不使用 watermark plugin？为什么需要重新发明的轮子？

如果你必须自己做，

$(document).ready(function(){
    $('#search').focus(function() {           
        if($(this).val() == "Search for") 
        $(this).val('');
    }).focusout(function() {
      if($(this).val() === '')
         $(this).val('Search for');
    });
});

【讨论】：

对代码投赞成票，为4行代码添加插件似乎有点过分。
感谢代码有效！我同意马特的观点。插件有点多。

【解决方案3】：

如何使用 focos out

$("#search").focusout(function() {
$(this).val('Search for');
});

或模糊

    $('#search').focus(function(){
// focus logic goes here


}).blur(function(){

  $(this).val('Search for');

});

【讨论】：

【解决方案4】：

相同但“倒置”的呢？

$('#search').blur(function() {
    if($(this).val() == "" ) { 
        $(this).val('Search for');
    }
});

【讨论】：

好主意，但我仍然需要清除模糊的默认值
用户第一次点击进入搜索框的情况呢？