下面有一个 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);
});
});
最佳答案
对代码为何如此工作的解释有点复杂。对于每个输入字段,您都在为所有输入上的“模糊”事件建立(并在每个“焦点”事件上重新建立!)处理程序。这是令人困惑和难以思考的,所以我只是总结一下并说“不要这样做。”
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 影响样式。 (输入必须从类开始;或者我想您可以将类应用到焦点上。)
关于jquery - 多个输入的清算值(value)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3556126/