jquery - 多个输入的清算值(value)？

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 影响样式。 (输入必须从类开始；或者我想您可以将类应用到焦点上。)