php - 删除输入中的 "Search"文本，仅适用于一个搜索框，不适用于所有搜索框

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