焦点和模糊事件触发错误的元素

Question

上我想一次为多输入设定的默认值，取消对焦点值和模糊重新设置，如果输入的是空的。为了实现这一目标，使用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控制台，您会看到明显的错误行为。

Answer 1

你忘了设定$ 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'); 
}); 

Answer 2

你的意思是这样的：

$('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); 
    } 
}); 

DEMO：http://jsfiddle.net/fnBeZ/4/