js禁止chrome保存密码、更新密码

chrome自带buff,对于属性type="password"的输入框会自动保存密码;
下次遇到type="password" 的输入框时候,会自动填充密码;
你在输入不同的密码之后,还会很人性的提示你是否需要更新密码。

这样也许对用户是好事,但是太频繁的的弹框提示,并不表示所有的业务场景都需要。

我们项目中,只在登录模块允许浏览器保存密码,由于是高频操作的产品,其他任何地方输入框禁止出现浏览器弹框提示更新密码,或者保存密码的操作。

这样一来就必须解决浏览器这个属性了,翻遍网上的方案,大致分为:
1.使用 autocomplete="off" 、 autocomplete="new password" 、 autocomplete="false" ,禁止自动填充。
2.获取焦点时候切换 type 或者readonly属性,这种没什么效果,自动填充好解决

<input type="password" name="Password" autocomplete="off" readonly 
onfocus="this.removeAttribute('readonly');" >

思来想去,只要type为password,那么就会有这个问题,那就不用password类型,

  • 一开始想到的山寨方法,使用伪类或者字体图标实现密码框的原点效果,遮挡在text类型上的文字上面,也能实现,存在的问题是,不能切换为英文输入法,中文时候也能录入。

  • 还有一种解决方法,可以实现禁止弹更新密码的弹窗,就是监听输入框input事件,每次输入时候,将value置为空,延时赋值,不过带来新的问题是,输入框下面出现密码选择的列表。

 <el-input type="text" v-model.trim="password" 
              autocomplete="off" value=""
              @input="handlePwdChange">
 </el-input>
...
     handlePwdChange(v) {
        this.password = ''
        setTimeout(() => {
          this.password = v
        }, 0)
      },
  • 翻了翻stackoverflow,发现一个hack方法,跟我的有异曲同工之妙,
type="text"
 style="text-security:disc; -webkit-text-security:disc;"

这个存在兼容问题,只能webkit内核的浏览器上工作,该属性后面会不会被干掉也不能保证,好在我们的项目要求必须使用chrome浏览器,嘎嘎。暂时解决了,这个同样存在不能限制输入法的问题。
怎么不允许输入中文,那就用正则吧,

 onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"
  • 同上面的方法,可以使用字体图标,建立自己的text-security
[https://github.com/kylewelsby/dotsfont](https://github.com/kylewelsby/dotsfont)

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}
暂时的解决方法:(不考虑非webkit内核浏览器)
 <el-input
              type="text"
              v-model.trim="pass"
              :maxlength="20"
              onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"
              oncontextmenu="return false"
              onpaste="return false"
              oncopy="return false"
              oncut="return false"
              auto-complete="off" value=""
              style="text-security:disc; -webkit-text-security:disc;ime-mode:disabled"
            >
            </el-input>

推荐阅读更多精彩内容