jQuery를 사용하여 HTML 텍스트 입력을 비밀번호 입력으로 변경

Question

텍스트 입력에 기본값 "password"가 있습니다. 내가 jQuery를 사용하여이 작업을 시도

사용자가이 분야, 즉 초점이 텍스트 필드로 설정되어있을 때, 나는 암호를 입력 유형을 변경하려면를 클릭

..하지만 기쁨 :

<form name = "loginform" action = "get_login.php" method = "post"> 
    <input id = "emailtxt" name = "username" type="text" size="25" value = "E-mail"/> 
    <input id = "passwordtxt" name = "password" type="text" size="25" value = "Password"/>          
</form> 

결과 : 여기

$("#passwordtxt").click(function(e){ 
    e.stopPropagation(); 
    if($("#passwordtxt").val() == "Password"){  
     $("#passwordtxt").val("");  
    } 
    $("#passwordtxt").attr('type','password'); 
}); 

가가 적용되는 HTML입니다 그것은 암호 유형을 변경하지 않고, 그냥 ...

텍스트로 유지

Answer 1

더 나은 해결책은 placeholder 속성을 사용하여 입력 상자의 유형을 변경하는 것을 번거롭게하지 않고 원하는 것을 정확하게 달성하는 것입니다.

그렇지 않으면 속성으로하지를 사용하여 속성으로 속성을 해결하기를 원할 것입니다 :

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

Answer 2

당신은 jQuery를 가진 input 요소의 type을 변경할 수 없습니다. 그 이유는 인터넷 익스플로러에서는 가능하지 않기 때문에 jQuery는 모든 브라우저에서이 작업을 수행 할 수 없게합니다.

는 .attr() docs에서보세요 :

참고 : jQuery를가하거나 요소에 type 속성을 변경 금지하고 모든 브라우저에서 오류가 발생합니다. Internet Explorer에서 type 특성을 변경할 수 없기 때문에 입니다. 문제에 대한

하나 개의 잠재적 인 솔루션은 type="password" 입력에 (A span 또는 div 또는 당신이 무엇을 정말 좋아)에 텍스트를 오버레이하고, focus의 텍스트를 숨길 수 있습니다.

Answer 3

이 효과를 얻을 수있는 HTML5 자리 표시 자 속성을 살펴보십시오.

<input type="password" placeholder="Password" /> 

이전 IE를 지원하려면 대체로 고려해야 할 수도 있습니다.

Answer 4

직접적인 것은 아닙니다. jQuery에는 다음과 같은 자체 오류 메시지가 있습니다.

jQuery.error("type property can't be changed"); 

대신에 동일한 위치와 크기의 다른 요소 (암호 1)를 사용할 수 있습니다. 암호는 처음에는 표시되지 않지만 입력은 표시됩니다. 그런 다음 이들 사이를 전환 할 수 있습니다.

$('#input, #password').toggle(); 

비밀번호를 하나만 선택하면됩니다. 이를 것이다 HTML5placeholder 속성 사용

http://jsfiddle.net/pimvdb/mqq4z/

Answer 5

.예 :

<input type = "password" placeholder = "Password" /> 

HTML5를 지원하지 않는 클라이언트를 지원하려면 javascript/jQuery 솔루션이 필요합니다.

Answer 6

제안 된대로 placeholder과 플러그인을 사용해야 IE에서 작동합니다.

$("#passwordtxt").prop("type", "password");