清除多个输入的值？

Question

我下面有一个jQuery脚本，可清除焦点输入的值，如果输入为空，则将其放回模糊状态。 效果很好，但这是问题所在：

假设我在同一页面上有3个输入字段。 我单击第一个值为“名称”的值， defaultValue变量变为“名称”，并且该字段清除。 如果单击，该值将返回到“名称”。 现在，如果我在不刷新页面的情况下单击第二个字段，则清除就可以了，但是当我在外部单击时，不是获取值“ Initials”，而是获取第一个字段的值。

那么，每次单击字段时，如何获取defaultValue变量进行更新？

var adaugaInput = $('form#adauga input:text');

adaugaInput.focus(function() {
    var defaultValue = $(this).val();
    if($(this).attr("value") == defaultValue) $(this).attr("value", "");
    adaugaInput.blur(function() {
        if($(this).attr("value") == "") $(this).attr("value", defaultValue);
    });
});

Answer 1

关于代码为何按其工作方式的解释有些复杂。 对于每个输入字段，您都将为所有输入上的“模糊”事件建立（并重新建立每个“焦点”事件！）处理程序。 这令人困惑且难以思考，因此我将其总结为“不要那样做”。

adaugaInput.focus(function() {
  var input = $(this);
  if (!input.data('default')) input.data('default', input.val());
  if (input.val() === input.data('default'))
    input.val('');
});

adaugaInput.blur(function() {
  var input = $(this);
  if (input.val() === '') input.val(input.data('default'));
});

请注意，我使用“ .val（）”来获取/设置输入字段的“值”属性。 此外，“模糊”处理程序设置了“焦点访谈”的处理程序之外 。 这段代码使用jQuery“ .data（）”机制来保留每个元素的默认值。 未经测试，但可能非常接近。

使用这样的机制，有时最好重新设置输入的样式，以便（例如）使用较浅的字体颜色显示默认值。 为此，您将删除一个类并将其添加到输入字段，并使用CSS影响样式。 （输入必须从班级开始；或者我想您可以将班级放在重点上。）

Answer 2

我通常使用此代码有效:)

http://www.eggchops.com/web-stuff/jquery/jquery-clear-focus-function/

这是代码：

$(document).ready(function(){

var clearMePrevious = ”;

// clear input on focus
$(’.clearMeFocus’).focus(function() {
  if($(this).val()==$(this).attr(’title’)) {
    clearMePrevious = $(this).val();
    $(this).val(”);
  }
});

// if field is empty afterward, add text again
$(’.clearMeFocus’).blur(function() {
  if($(this).val()==”) {
    $(this).val(clearMePrevious);
  }
});
});

Answer 3

我会反过来，先保存defaultValue，然后绑定焦点：

var adaugaInput = $('form#adauga input:text');

adaugaInput.each(function(){
    var defaultValue = $(this).val();
        $(this).focus(function() {

        if($(this).attr("value") == defaultValue) $(this).attr("value", "");
    });
    $(this).blur(function() {
        if($(this).attr("value") == "") $(this).attr("value", defaultValue);
    });
});

适用标准免责声明，以上代码未经测试。 （编辑：修复了多个模糊绑定）