브라우저 자동 완성 기능이 JS 이벤트를 트리거하지 않습니다.

Question

<form> 
<input type="text" id="username" value="Username"> 
<div style="position:relative"> 
<span style="position:absolute;top:0;" id="passwordTxt">Password</span> 
<input style="position:absolute;top:0;visibility:visible;" 
type="password" id="password" value=""> 
</div> 
</form> 

var obj=document.getElementById("password") 
obj.addEventListener("change", change(0) , false); 
obj.addEventListener("input", change(0) , false); 
obj.addEventListener("focus", change(0) , false); 
obj.addEventListener("blur", change(1) , false); 

function change(action){ 
return function(){ 
var txt = document.getElementById("passwordTxt") 
var pass= document.getElementById("password") 
if(action){ 
if(pass.value =="") 
txt.style.visibility="visible"; 
} 
else txt.style.visibility="hidden"; 
} 
} 

type="password"의 존재는 브라우저가 remember password 기능을 요구할 수있게합니다. 사용자 이름이 이미있는 경우 캐시 된 사용자 이름으로 팝업을 드롭 다운하고 브라우저에 의해 채워지는 password이 있으면 매우 편리합니다. 하지만 그 기능은 JS 이벤트를 트리거하지 않습니다 !!. 암호 또는 모든 값을 해당 암호 텍스트 상자에 입력하면 span이 숨겨지기를 원하지만 브라우저 기능은 작은 버그를 일으키는 것입니다.

어떤 도움 감사합니다. 나는 당신이 비어있는 경우 제목 암호를 사용하여 텍스트 상자를 무색하게 할 생각

Answer 1

을 (그래서 일반 JS 해결 방법/솔루션이 나에게 도움이 될 것입니다, jQuery를 함께 작동하지 않는 건가요). 내가 생각할 수있는 간단한 해결책은 페이지를로드하고 텍스트를 사용할 수 있는지 확인하는 것입니다.

더 나은 방법은 기존의 프레임 워크와 테스트 된 프레임 워크를 사용하는 것입니다. 부트 스트랩에서 찾고있는 것을 찾을 수 있습니다. http://twitter.github.com/bootstrap/base-css.html#forms으로 이동하여 인라인 양식을 봅니다. 예 :