Удалите текст «Поиск» при вводе и примените только к одному окну поиска, но не ко всем

Question

Я сейчас работаю над сайтом и обнаружил, что jquery / javascript, который я реализовал для поиска, применяет одинаковый эффект ко всем полям поиска на странице, когда я щелкаю в поле ввода.По умолчанию он удаляет текст «Поиск» и очищает его, чтобы вы могли ввести поисковый запрос.Я хочу, чтобы она выполняла эту функцию только в окне поиска, которое щелкается внутри, а не во всех окнах поиска на странице.Однако, если вы посмотрите на этот пример , вы заметите, что когда вы щелкаете в поле поиска в верхней части страницы, он очищает текст от обоих.Я думаю, что я мог бы исправить это с .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);

Спасибо!Taylor

Answer 1

пример плагина

вот исправление.

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

Используйте другой селектор.Вместо всех входных данных с классом «search-box» попробуйте присвоить ему уникальный идентификатор или класс.

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

Я бы попытался использовать более "jQuery" способ сделать это. jsFiddle

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

Answer 4

Это метод, который я использую, который также может быть полезен для вас.Он не сработает для обоих объектов, поскольку использует $ (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() );
});