3

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

我有以下 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，来实现我想要的？

4

3 回答 3

2

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

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

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

这是一个小提琴

于 2013-08-05T11:51:08.613 回答
2

没有this，因为您不在回调中。您必须遍历每个匹配的元素，一次设置它们的默认值。

“干净的 jQuery 方式”很简单each：

$('input,textarea').each(function () {
  $(this).data('default', $(this).val());
});
于 2013-08-05T11:47:31.370 回答
2

您需要遍历输入元素，然后使用.each()将值设置为数据

$('input,textarea').each(function(){
    var $this = $(this);
    $this.data('default', $this.val())
});
于 2013-08-05T11:47:49.987 回答