删除输入中的“搜索”文本，仅适用于一个搜索框，而不是全部

Question

我现在在一个网站上工作，发现当我点击输入字段时，我为搜索实现的 jquery/javascript 对页面上的所有搜索框都应用了相同的效果。默认情况下，它会删除“搜索”文本并将其清除，以便您可以键入搜索词。我只希望它在单击的搜索框上执行此功能，而不是页面上的所有搜索框。但是，如果您look at this example，您会注意到当您单击页面顶部的搜索字段时，它会清除两者中的文本。我想我可以用.parent() 或其他东西来修复它，但我是一个 jQuery 新手。任何帮助将不胜感激。

也不知道为什么我的图标周围会出现边框，但我会解决这个问题。

这里是 jQuery 的搜索功能：

$(document).ready(function(){
  $('.search-box').textdefault({'text':'Search'});
});

(function($){
  $.fn.textdefault = function(settings){
    var Elements = this;
    var settings = $.extend({}, $.fn.textdefault.defaults, settings);
    return Elements.each(function(){
      if($(Elements).is("input")){ TextDefault( $(Elements) ); }
    });

    function TextDefault(Input){
      if (Input.val().length==0) Input.val(settings.text);
      Input.focus(function () {
        if (Input.val()==settings.text) Input.val('');
      });
      Input.blur(function () {
        if (Input.val().length==0) Input.val(settings.text);
      });
    }
  };

  $.fn.textdefault.defaults = {
    text: 'Search'
  };

})(jQuery);

谢谢！ 泰勒

Answer 1

plugin example

这里是更正。

Elements 包含“传递”到此插件的所有元素。

var Elements = this;

通过在每个函数中使用 $(Elements) 而不是 $(this)，您 使用所有输入作为一个

  return Elements.each(function() {
            if ($(this).is("input")) {
                TextDefault($(this));
            }
        });

应该调用这行代码来初始化插件。所以它应该放在插件之外的某个地方，例如在$(document).ready() {} 代码块中，因为您需要为页面加载时的输入初始化插件。

$('.search-box').textdefault({
        'text': 'Search'
    });

Answer 2

使用不同的选择器。尝试给它一个唯一的 ID 或类，而不是所有带有“搜索框”类的输入。

$("#search_default").textdefault({'text':'Search'});

或

$(".search-box.defaulttext").textdefault({'text':'Search'});

HTML 将是

<input type="text" class="search-box defaulttext" ...

或

<input type="text" id="search_default" ...

Answer 3

这是我使用的方法，它也可能对您有所帮助。它不会为两个对象触发，因为它使用 $(this) 来控制被聚焦/模糊的对象。

$(".search-box").live("focus", function(){
    if ( $(this).val() == $(this).attr("rel") ){
        $(this).val('');
    }
}).live("blur", function(){
    if ( $(this).val() == '' ) {
        $(this).val( $(this).attr("rel") );
    }
}).each( function(){
    $(this).attr("rel", $(this).val() );
});

Answer 4

我会尝试使用更“jQuery”的方式来做到这一点。 jsFiddle

$('input').focus(function(){
    $(this).data('text', $(this).val()).val('');
});
$('input').blur(function(){
    if( $(this).val() === "" ) $(this).val( $(this).data('text') );
});