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

首先，让您的生活更轻松，并为输入提供一个类：

<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 2

$(":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 3

未测试

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

});

编辑：这似乎是比其他解决方案更通用的解决方案。它首先采用输入字段中的任何内容作为默认文本。虽然我不打算在jquery中包装事件目标来改变CSS。

Answer 4

将其变成插件

$.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

需要帮助将此内联javascript转换为jQuery函数

4 个答案: