最近需求中遇到了禁止密码框输入中文以及中文字符，并且不能出现浏览器保存密码以及回填的需求，通过查找资料找到了本部分的解决办法。
原因
如果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"readonlyautocomplete="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 = thissetTimeout(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 和deletelet 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框还是会提示保存密码弹框的。
借鉴: /wdm891026/article/details/116653387.
如果觉得《vue项目中input密码框屏蔽浏览器保存密码以及避免点击密码框出现下拉菜单。》对你有帮助，请点赞、收藏，并留下你的观点哦！
