Question

下面有一个jQuery脚本可以清除焦点上的输入值，如果输入仍为空，则将其重新置于模糊状态。它的效果很好，但问题出在这里：

假设我在同一页面上有3个输入字段。我点击第一个值为“Name”的值， defaultValue 变量变为“Name”并清除该字段。如果我单击，则值将返回“名称”。现在，如果我点击第二个字段而不刷新页面，它就会很好地清除，但是当我点击外部时，它不会获得值“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（）”来获取/设置输入字段的“value”属性。此外，“模糊”处理程序设置在外部“焦点”处理程序。此代码使用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模糊绑定）

清除多个输入的值？

3 个答案: