첫 번째 문자가 입력 필드에 누락되었습니다.

Question

저는이 두 개의 거의 동일한 기능을 사용하여 입력 필드에서 키 누르기 이벤트를 잡아 내고 그 안에있는 레이블을 지 웁니다. 그러나 어떤 이유로 사용자 이름 필드에 입력하는 동안 입력 한 첫 번째 문자는 암호 필드에 나타나지 않습니다. 이것의 원인이 무엇일까요?

$("#username").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

$("#password").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).prop("type", "password"); 
    $(this).val(""); 
    } 
}); 

여기 예를 참조하십시오 https://jsfiddle.net/c0qdj1u3/

Answer 1

다음 줄은 버그를 일으키는 :

$(this).prop("type", "password"); 

당신이 유형 인 암호로 시작하는 경우, 그것은 잘 작동합니다. 값을 설정하는 대신 자리 표시자를 사용하십시오. 아래를 참조

<input type="text" placeholder="Username" class="label" id="username"><br> 
<input type="password" placeholder="Password" class="label" id="password"> 

$("#username").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

$("#password").keypress(function() 
{ 
    if($(this).hasClass("label")) 
    { 
    $(this).removeClass("label"); 
    $(this).val(""); 
    } 
}); 

당신이 이전에 어떤 입력 텍스트 상자에서 일부 값이 있어야합니다 경우, jQuery를-자리 표시 자 플러그인을 사용해보십시오. https://github.com/mathiasbynens/jquery-placeholder