vue项目中input密码框屏蔽浏览器保存密码及禁止点击密码框显示下拉菜单

1. 原因
2. 解决方法
3. 直接上代码
4. 结语

最近需求中遇到了禁止密码框输入中文以及中文字符，并且不能出现浏览器保存密码以及回填的需求，通过查找资料找到了本部分的解决办法。

原因

如果input框type=text时，会将中文以及中文字符输入进去。input 框使用type=pasword时，可以将输入的中文转换成英文字母，但是会使浏览器触发保存密码以及密码回填的功能。

解决方法

当时发现可以使用readonly进行只读，但是这样会使密码框不显示光标，后来查找资料发现可以对失焦聚焦进行readonly的切换。

直接上代码

HTML 部分：

 <input 
        id="passId" 
        ref="passId"
        style="ime-mode:disabled"
        @focus="passFocus"
        @blur="passBlur"
        @click="passClick"
        @keydown="passKeydown"
        @mousedown="passMousedown"
        type="password"
        readonly
        autocomplete="new-password" 
        placeholder="密码"  
         
        name="Password" value="" 
        oncopy="return false;" 
        onpaste="return false;" 
        oncut="return false;"   />

JS 部分：

passFocus(ref,e){
      console.log(ref,e)
      let that = this
      setTimeout(function () {
        console.log(that.$refs)
          that.$refs.passId.removeAttribute("readonly");
        //获取焦点时 同时去除只读，这样可以获取光标，进行输入
      })
      
    },
    passBlur(e){
      this.$refs.passId.setAttribute("readonly","readonly")
    },
    //为什么先失去焦点，在获取焦点，这样子可以避免第二次或更多次连续点击输入框时，出现的用户密 
    // 码清单的框可以快速去除
    passClick(){
      this.$refs.passId.blur()
      this.$refs.passId.focus()
    },
    passKeydown(e){
      let keyCode = e.keyCode;
      if (keyCode === 8 || keyCode === 46) {
          //backspace 和 delete
          let len = this.$refs.passId.value.length;
          if (len === 1) {
              this.$refs.passId.value = '';
              return false;
          }
          if (e.target.selectionStart === 0 && e.target.selectionEnd === len) {
              this.$refs.passId.value = '';
              return false;
          }
      }
      return true;
    },
    //用来阻止第二次或更多次点击密码输入框时下拉用户密码清单的框一闪而过的问题
    passMousedown(){
      this.$refs.passId.blur()
      this.$refs.passId.focus()
    },

效果如下：

点击登录之后有的会出现保存密码的弹框，在登陆之后的页面中添加一行input框就可以阻止浏览器展示保存密码弹框：如下

 <div style="display:block;opacity: 0;width:0px;height:0px;overflow: hidden">
    <input type="text" name="username" autocomplete="off"/>
    <input  type="password" name="password"  autocomplete="off" readonly/>
</div>

注意：不能将input框进行隐藏，否则浏览器找不到input框还是会提示保存密码弹框的。

结语

以上就是我在 vue 项目中input密码框屏蔽浏览器保存密码以及禁止点击密码框显示下拉菜单方法，相信有一天你也会遇到类似需求，供大家参考。