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并查看内联表单示例

浏览器自动填充功能不会触发任何JS事件

1 个答案: