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

原因

如果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="密码"  
        class="login_input el-input__inner" 
        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框还是会提示保存密码弹框的。

借鉴: https://blog.csdn.net/wdm891026/article/details/116653387.