javascript - jQuery - 从 $(this).val() 设置 data() 变量

Question

我的网站上有一个电子邮件表单，有四个字段。三个文本输入和一个文本区域。每个字段都有一个默认值属性作为其标签。我希望这些值在其元素的 focus 和 focusout 事件中自动取消设置/重置。

我有以下 JavaScript/jQuery 代码，它创建了这种行为。

$('input,textarea').data('default', "bleh");
$('input,textarea').focus(function() {
    if($(this).val() === $(this).data('default')) {
            $(this).val('');
    }
});
$('input,textarea').focusout(function() {
    if ($(this).val() === '')
    {
            $(this).val($(this).data('default'));
    }
});

我的问题出在初始 data('default') 属性的存储上。我曾尝试使用 .data('default', $(this).val())... 但显然这是非法的并且 $(this) 无法识别.

我试图找到一种干净的 jQuery 方法来遍历每个元素，但我似乎找不到。

有没有使用 jQuery 的简单方法来实现我想要的？

Answer 1

除非我弄错了，否则没有理由在元素上设置数据属性，您可以使用元素的 defaultValue 属性:

$('input, textarea').focus(function() {
  if (this.value === this.defaultValue) {
    this.value = '';
  }
});

$('input, textarea').focusout(function() {
  if (!$.trim(this.value).length) {
    this.value = this.defaultValue;
  }
});

Here's a fiddle