Question

我的网站上有一个电子邮件表格，有四个字段。三个文本输入和一个文本区域。每个字段都有一个默认值属性，用作其标签。我希望这些值能够自动取消/重置其元素的焦点和焦点事件。

我有以下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

没有this，因为您没有回调。您必须迭代每个匹配的元素，一次设置它们的默认元素。

“干净的jQuery方式”只是each：

$('input,textarea').each(function () {
  $(this).data('default', $(this).val());
});

Answer 2

您需要遍历输入元素，然后使用.each()

将值设置为数据

$('input,textarea').each(function(){
    var $this = $(this);
    $this.data('default', $this.val())
});

Answer 3

除非我弄错了，没有理由在元素上设置数据属性，你可以使用元素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;
  }
});

jQuery - 从$（this）.val（）设置data（）变量

3 个答案:

Here's a fiddle