浏览器自动填充功能不会触发任何 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，但浏览器功能让一个小错误蔓延。

感谢任何帮助。（我不使用 jQuery，所以一个简单的 JS 解决方法/解决方案对我有帮助）

Answer 1

我相信如果标题为“密码”的文本框为空，您想遮盖它。我能想到的简单解决方案是连接到页面加载并查看文本是否可用。

更好的方法是使用现有的和经过测试的框架。您可以在 Bootstrap 中找到您要查找的内容。转到http://twitter.github.com/bootstrap/base-css.html#forms 并查看内联表单示例