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>

最后编辑于：2019.07.10 09:15:28