我试图同时为多个输入设置一个默认值,在焦点上删除该值,如果输入为空,则将其再次设置为模糊。为了实现这一点,我使用 jQuery 得到了以下代码:
var settings = {
value: '',
focusColor: 'black',
blurColor: '#CCC',
value : 'test'
};
$.each($('input'), function(index, el) {
$(el).on('blur', function(ev) {
$el = $(this);
console.log('blur ' + $el.attr('value') + ' ' + $el.attr('id'));
if ($el.attr('value') == '')
$el.attr('value', settings.value).css('color', settings.blurColor);
}).on('focus', function(ev) {
console.log('focus ' + $el.attr('value') + ' ' + $el.attr('id'));
if ($el.attr('value') == settings.value)
$(this).attr('value', '').css('color', settings.focusColor);
});
$(el).trigger('blur');
});
有这个 HTML:
<input id="text" type="text" />
<input id="email" type="email" />
问题是,如果我关注第一个输入,然后关注第二个输入,则触发的事件是:关注第一个输入,模糊第一个输入,再次关注第一个输入。因此,如果我在第一个文本中输入某些内容,然后再次关注第二个文本,然后再次在第一个文本中输入内容,它不会删除示例文本,并且会删除我输入的内容。
您可以看到(未)工作示例 here 。打开 JavaScript 控制台,您会清楚地看到错误的行为。
最佳答案
您忘记了焦点事件中设置的 $el 。
$.each($('input'), function(index, el) {
$(el).on('blur', function(ev) {
$el = $(this);
console.log('blur ' + $el.attr('value') + ' ' + $el.attr('id'));
if ($el.attr('value') == '')
$el.attr('value', settings.value).css('color', settings.blurColor);
}).on('focus', function(ev) {
$el = $(this); // <-- should update $el
console.log('focus ' + $el.attr('value') + ' ' + $el.attr('id'));
if ($el.attr('value') == settings.value)
$(this).attr('value', '').css('color', settings.focusColor);
});
$(el).trigger('blur');
});
关于javascript - 焦点和模糊事件在错误的元素上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11382810/