Question

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = 'Type here';
        }
    });
});

我有这个完美的代码块，除了它不是动态的。我想知道是否有一种优雅的方式可以动态地将值重置为原始值。我想也许如果你在其ID或其他类型的属性中定义原始文本，你可以用那种方式重置它。或者你可以使用变量或数组或元组。 SO认为最好的方法是什么？

Answer 1

如何将值存储到输入的其他属性中？

$(document).ready(function() {
    $('.watermark').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.title = this.value;
            this.value = '';
        }
    });

    $('.watermark').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = this.title;
        }
    });
});

Answer 2

在这种情况下，我更喜欢使用html5（placeholder attrinute）和javascript后退。

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}
$(document).ready(function() {
  if (!supports_input_placeholder())
  {
    $('input').each(function(){
      $(this).val($(this).attr('placeholder'))
    });
    $('input').focus(function() {
        if (this.className == 'watermark')
        {
            this.className = '';
            this.value = '';
        }
    });

    $('input').blur(function() {
        if (this.value == '')
        {
            this.className = 'watermark';
            this.value = $(this).attr('placeholder');
        }
    });
  }

});

此脚本将检测本机占位符是否可用，否则它将从占位符属性中获取文本并进行模拟。

Answer 3

如果它的作用域是每个元素，你可以将它存储在一个变量中：

$(function() {
  $('.watermark').each(function() {
    var lead = $(this).val();
    $(this).focus(function() {
      if ($(this).val() == lead) $(this).val('');
    }).blur(function() {
      if ($(this).val() == '') $(this).val(lead);
    });
  });
});

如何重构这个代码块简单而动态？

3 个答案: