在多个输入上清除值？

Question

我下面有一个jQuery脚本，可以清除焦点上的输入值，如果输入保持空，则将其放回模糊。它效果很好，但这是问题：

假设我在同一页面上有3个输入字段。我单击一个带有“名称”的值， 默认值 变量变为“名称”，字段清除。如果我单击，该值将返回“名称”。现在，如果我在不刷新页面的情况下单击第二个字段，它可以清除良好，但是当我单击外部时，它没有获得值“缩写”，而是获得第一个字段的值。

那我该如何获得 默认值 每次点击字段时都可以自我更新？

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

关于您的代码为何运作方式的解释很复杂。对于每个输入字段，您都在每个“焦点”事件上建立（并重新建立在每个“焦点”事件上！）用于“ Blur”事件的处理程序 全部 输入。这是令人困惑的，很难考虑，所以我要总结一下，说“不要那样做”。

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);
    });
});

适用标准免责声明，上述代码未进行测试。 （编辑：固定的mulitple Blur绑定）