Jquery 焦点移出时返回默认输入值

Question

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

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

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

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

Answer 1

这是为您提供的一些快速代码。它将使用 jQuery 数据方法来保存一个 bool 值，表明用户已经输入了一些内容。如果用户没有输入任何内容，它将再次显示文本。

$("#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/

Answer 2

如果您已经在使用 jQuery，为什么不使用水印插件？为什么需要重新发明轮子？

如果你必须自己做这件事，

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

Answer 3

怎么样

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

使用焦点输出或模糊

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


}).blur(function(){

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

});

Answer 4

相同但“颠倒”又如何呢？

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