javascript - 浏览器自动填充功能不会触发任何 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" 的存在将使浏览器能够提示记住密码 功能。如果用户名已经存在，下拉弹出缓存用户名，如果它的 password 存在 - 它由浏览器填充 - 非常方便。但是，该功能不会触发任何 JS 事件!!如果在该密码文本框中输入密码或任何值，我希望隐藏 span，但浏览器功能让一个小错误蔓延。

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

Answer 1

我相信如果文本框为空，您希望用标题 Password 遮盖它。我能想到的简单解决方案是 Hook 页面加载并查看文本是否可用。

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