Нужна помощь в преобразовании этого встроенного JavaScript в функцию JQuery

Question

У меня есть следующий HTML / JS, который показывает начальное значение, удаляет его, когда вы щелкаете в поле ввода, а затем повторно заполняет его исходным значением, если вы ничего не вводите.

Мне нужно сделать это для нескольких полей ввода на одной странице, и поэтому я хотел бы превратить ее в функцию jQuery, которую я затем мог бы применить к любому полю ввода с определенным классом.

<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" />

Answer 1

$(":text[name='search']")
  .focus(function(){
    if ($(this).val() == 'Search by name')
      $(this).val("").css("color", "black");
  })
  .blur(function(){
    if ($(this).val() == "")
      $(this).val("Search by name").css("color", "#aaa");
  });

Answer 2

Во-первых, сделайте вашу жизнь проще и дайте ввод классу:

<input type="text" class="search" name="search">

Вы можете использовать селектор атрибута:

$(":text[name='search']")...

но это намного быстрее:

$("input.search")...

и затем используйте это:

$(function() {
  $("input.search").focus(function() {
    this.defaultval = this.defaultval || $(this).val();
    if ($(this).val() == this.defaultval) {
      $(this).val("").css("color", "#000");
    }
  }).blur(function() {
    if ($(this).val() == "") {
      $(this).val(this.defaultval).css("color", "#AAA");
    }
  });
});

Answer 3

Преврати его в плагин

$.fn.inputMagic=function(text){
  return this.each(function(){
    var text=$(this).val()||text||''
    $(this).focus(function(){
     if ($(this).val() == text){
       $(this).val("").css("color", "black");
     }
    }).blur(function(){
      if ($(this).val() == ""){
       $(this).val(text).css("color", "#aaa");
      }
    });
  });
}

Тогда вы можете назвать это так

$('input.search').inputMagic('Search by name').show();//and continue to chain

Answer 4

непроверенных

jQuery(function () {
jQuery("input[type=text]").bind("focus",function(e){
   var input = e.target;
   input.defaultval = input.defaultval || input.value;
   if(input.value==input.defaultval) {
       input.value = "";
       input.style.color = '#000';

   }
}).bind("blur",function(e){
      var input = e.target;
      if(input.value == '') {
         input.value = input.defaultval;
         input.style.color = '#aaa';
      }
})

});

edit: похоже, это более общее решение, чем другие. Он принимает в качестве текста по умолчанию все, что происходит в поле ввода в первую очередь. Хотя я не беспокоюсь оборачивать цель события в jquery, чтобы изменить CSS.