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

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

原因

如果inputtype=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()
    },

效果如下:

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

点击登录之后有的会出现保存密码的弹框,在登陆之后的页面中添加一行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密码框屏蔽浏览器保存密码以及禁止点击密码框显示下拉菜单方法,相信有一天你也会遇到类似需求,供大家参考。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue项目中input密码框屏蔽浏览器保存密码及禁止点击密码框显示下拉菜单

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们