Javascript 聚焦和模糊事件在错误的元素上触发

我试图同时为几个输入设置一个默认值，在焦点上删除该值，如果输入为空，则在模糊上再次设置该值。为了实现这一点，使用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" />

问题是，如果我关注第一个输入，紧接着关注第二个输入，触发的事件是：关注第一个输入，模糊第一个输入，然后再次关注第一个输入。因此，如果我在第一个文本中键入一些内容，然后将注意力集中在第二个文本上，然后在第一个文本中再次键入，则不会删除示例文本，而是会删除我键入的内容

您可以看到（非）工作示例。打开JavaScript控制台，您将清楚地看到错误的行为。

---

​

你的意思是这样的：

$('input').on('blur', function(ev) {
    $el = $(this);
    console.log('blur ' + $el.va() + ' ' + $el.attr('id'));
    if ($el.val() == '')
        $el.attr('value', settings.value).css('color', settings.blurColor);
})

$('input').on('focus', function(ev) {
    $el = $(this);
    console.log('focus ' + $el.val() + ' ' + $el.attr('id'));
    if ($el.val() == settings.value) {
        $(this).val("");
        $(this).css('color', settings.focusColor);
    }
});

---

演示：

您在焦点事件中忘记了设置$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');
});

$。每个（$（'input'），函数（索引，el）{
$（el）.开启（'blur'，功能（ev）{
$el=$（此项）；
console.log（'blur'+$el.attr（'value'）++'+$el.attr（'id'））；
如果（$el.attr（'value'）=''）
$el.attr（'value'，settings.value.）.css（'color'，settings.blurColor）；
}).on（'焦点'，功能（ev）{
$el=$（这个）；//真是个愚蠢的错误……谢谢！！它就在我面前，我看不见：）你也应该用
var
声明
$el
（除非你出于某种原因特别希望它是全局的）。它发生了：-）很高兴我能帮忙谢谢你的回答，答案完全正确，但我之所以使用each循环，是因为我必须根据修改行为的输入状态添加一些逻辑。因此，我必须接受@Mantion的答案，因为它符合我的目的