用户信息弹框
在开发电商项目时，登录总会提示用户是否保存密码，很容易引起账号安全的问题，所以希望解决这个问题，禁止这个保存信息弹框
最初代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.log-reg-item {
/*height: 500px;*/
background: #0dbfdd;
}
.user-pwd-text, .user-pwd-password {
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div>
<!--<form id="formId" onsubmit="return false" method="post">-->
<!--<input type="text" style="display:none;" />-->
<!--帐号 <input type=text name="username" value=""><br/>-->
<!--密码 <input type="password" name="password"/><br/>-->
<!--<input type="button" class="submitBtn" value="登陆">-->
<!--</form>-->
<div class="log-reg-item">
<input type=text name="username" style="height: 30px;" value="">
<input type="password" name="PWD" id="PWD" maxlength="16" value="" class="text-box user-pwd-text" style="width:200px; background: #0C9A9A; height: 30px" autocomplete="off"/>
</div>
<div>
<input type="button" class="submitBtn" value="登陆">
</div>
</div>
</body>
<script>
document.querySelector('.submitBtn').onclick = function() {
window.location.href = './index.html'
}
</script>
</html>这么写完就会弹出上图弹框
解决办法
原因
对于type=password，浏览器会寻找与它临近的type=text，将用户名填上
第一次尝试
查询网上资料
在<input type="password" 这个标签之前加：<input type="password" style="display:none;" /> 用于混淆浏览器
<div>
<!--<form id="formId" onsubmit="return false" method="post">-->
<!--<input type="text" style="display:none;" />-->
<!--帐号 <input type=text name="username" value=""><br/>-->
<!--密码 <input type="password" name="password"/><br/>-->
<!--<input type="button" class="submitBtn" value="登陆">-->
<!--</form>-->
<div class="log-reg-item">
<input type=text name="username" style="height: 30px;" value="">
<input type="password" name="pay-pass" id="pay-pass" maxlength="16" value="" class="text-box user-pwd-password" style="width:200px;display:none;height: 60px" autocomplete="off"/>
<input type="password" name="PWD" id="PWD" maxlength="16" value="" class="text-box user-pwd-text" style="width:200px; background: #0C9A9A; height: 30px" autocomplete="off"/>
</div>
<div>
<input type="button" class="submitBtn" value="登陆">
</div>
</div>还是会有弹框
第二次尝试
使用JavaScript控制输入框的显示隐藏
<body>
<div>
<!--<form id="formId" onsubmit="return false" method="post">-->
<!--<input type="text" style="display:none;" />-->
<!--帐号 <input type=text name="username" value=""><br/>-->
<!--密码 <input type="password" name="password"/><br/>-->
<!--<input type="button" class="submitBtn" value="登陆">-->
<!--</form>-->
<div class="log-reg-item">
<input type=text name="username" style="height: 30px;" value="">
<input type="text" name="pay-pass" id="pay-pass" maxlength="16" value="" class="text-box user-pwd-password" style="width:200px;display:none;height: 60px" autocomplete="off"/>
<input type="password" name="PWD" id="PWD" maxlength="16" value="" class="text-box user-pwd-text" style="width:200px; background: #0C9A9A; height: 30px" autocomplete="off"/>
</div>
<div>
<input type="button" class="submitBtn" value="登陆">
</div>
</div>
</body>
<script>
document.querySelector('.submitBtn').onclick = function() {
window.location.href = './index.html'
}
document.querySelector('.user-pwd-text').onfocus = function(){
this.style.display = 'none'
document.querySelector('.user-pwd-password').value = ''
document.querySelector('.user-pwd-password').style.display = 'block';
document.querySelector('.user-pwd-password').focus();
}
document.querySelector('.user-pwd-password').onblur = function(){
// this.style.display = 'block';
this.style.display = 'none';
document.querySelector('.user-pwd-text').style.display = 'block'
}
</script>有时候弹，有时候不弹
第三次尝试
因为弹框的原因就是input的属性为password
所以在第二次基础上修改，确保页面没有属性为password的input
<script>
document.querySelector('.submitBtn').onclick = function() {
document.querySelector('.user-pwd-password').setAttribute('type', 'text')
window.location.href = './index.html'
}
document.querySelector('.user-pwd-text').onfocus = function(){
this.style.display = 'none'
document.querySelector('.user-pwd-password').value = ''
document.querySelector('.user-pwd-password').style.display = 'block';
document.querySelector('.user-pwd-password').focus();
}
document.querySelector('.user-pwd-password').onblur = function(){
// this.style.display = 'block';
this.style.display = 'none';
document.querySelector('.user-pwd-text').style.display = 'block'
}
</script>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。