잘못된 요소에서 발생한 포커스 및 흐림 이벤트

Question

여러 입력에 대한 기본값을 한 번에 설정하고 포커스가있는 값을 제거하고 입력이 비어있는 경우 다시 흐리게 설정하는 중입니다.

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을 갖는 : jQuery를 사용하여, 그것을 달성하기 위해,이 코드를 가지고

문제가

<input id="text" type="text" /> 
<input id="email" type="email" /> 

내가 두 번째 마우스 오른쪽 후 처음 입력에 초점을 경우, 그 첫 번째 입력에 집중하고 첫 번째 입력에 흐리게 처리하고 첫 번째 입력에 다시 초점을 맞 춥니 다. 따라서 첫 번째 글자에 글자를 입력하고 두 번째 글자에 초점을 맞춘 후 다시 첫 번째 글자를 입력하면 샘플 글자가 제거되지 않고 입력 한 글자가 제거됩니다.

예 : here. JavaScript 콘솔을 열면 잘못된 동작이 분명하게 표시됩니다.

Answer 1

당신은 포커스 이벤트 내부 설정 $ 엘을 잊어 버렸습니다.

$.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/