likes
comments
collection
share

【刘建】开发电商项目时，禁止浏览器自动弹出保存密码弹框

作者站长头像
站长
· 阅读数 89

用户信息弹框

在开发电商项目时，登录总会提示用户是否保存密码，很容易引起账号安全的问题，所以希望解决这个问题，禁止这个保存信息弹框

【刘建】开发电商项目时，禁止浏览器自动弹出保存密码弹框

最初代码

<!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>

最后终于不再弹框

【刘建】开发电商项目时，禁止浏览器自动弹出保存密码弹框

转载自:https://segmentfault.com/a/1190000041589538
评论
请登录