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

使用其他选择器。而不是所有带有“搜索框”类的输入尝试给它一个唯一的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 2

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 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') );
});

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

4 个答案: