vue项目中input密码框屏蔽浏览器保存密码以及避免点击密码框出现下拉菜单。 |
您所在的位置：网站首页 › 火狐浏览器保存密码 › vue项目中input密码框屏蔽浏览器保存密码以及避免点击密码框出现下拉菜单。 |
vue项目中input密码框屏蔽浏览器保存密码以及避免点击密码框出现下拉菜单。
|
最近需求中遇到了禁止密码框输入中文以及中文字符，并且不能出现浏览器保存密码以及回填的需求，通过查找资料找到了本部分的解决办法。 原因如果input框type=text时，会将中文以及中文字符输入进去。input框使用type=pasword时，可以将输入的中文转换成英文字母，但是会使浏览器触发保存密码以及密码回填的功能。 解决方法当时发现可以使用readonly进行只读，但是这样会使密码框不显示光标，后来查找资料发现可以对失焦聚焦进行readonly的切换。 直接上代码html部分： 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框进行隐藏，否则浏览器找不到input框还是会提示保存密码弹框的。 借鉴: https://blog.csdn.net/wdm891026/article/details/116653387. |
点击登录之后有的会出现保存密码的弹框，在登陆之后的页面中添加一行input框就可以阻止浏览器展示保存密码弹框：如下【本文地址】
今日新闻 |
推荐新闻 |