admin管理员组文章数量:1570425
文章目录
- 场景
- 需求
- 试错
- 解决
- 完整代码
场景
当我进入此页面得时候，输入框自动补全了账号和密码，而且输入框获取焦点时会有账号和密码提示
需求
从账号安全角度来说，不希望用户每次都能直接记住密码登录，而是希望用户每次都能自己输入账号和密码
试错
不知道是不是谷歌浏览器得原因，百度了好多种方案，都不能满足我的需求
- 加属性 autocomplete=“off”
------------------- 没啥用 - <input type=“text” style=“height: 0;opacity: 0”>
------------------- 在input框前面或者后面加上这行代码， 这个看网上貌似解决了一些人的问题，但是对我仍然没有一点用 - 加属性 autocomplete= “new-password”
------------------- 有点用，用处在于可以去掉自动补全，但是去掉浏览器的自动提示 - readonly οnfοcus=“this.removeAttribute(‘readonly’);”
------------------- 也有点用，效果同2
3.4 效果差不多是这样，但不是我要的效果
5. type=“text”
— 因为只有当输入框的type属性为password时，才会有账号密码提示
— 所以我的思路是在focus方法和input方法里面，判断输入框值为空时，让type为text，否则type为password
— 这种方法一开始点击的时候不会弹出提示，但是当把输入框内容清空时，提示又会弹出来
emmm很心碎…
不过后面换了种方式解决之后，大概知道是什么问题了，有时间会再试一下
解决
从 readonly οnfοcus=“this.removeAttribute(‘readonly’);” 得到思路
当readonly属性为true时，肯定就不会弹出提示，所以可以在失去焦点时设置readonly属性为true，获取焦点时再让readonly为false，但是要注意获取焦点时不能立马变为false，可以设置一个计时器
这里需要用4个方法控制
- 获取焦点 focus事件
让readonly为false - 失去焦点 blur事件
让readonly为true - 删掉内容时 input事件
判断输入框内容为空时，直接调用blur和focus
— 对backspace键、delete键一个个删除和多个删除均有用 - 鼠标按下 mousedown事件
直接调用blur和focus
— 防止鼠标多次点击输入框时出现提示
注意：调用blur和focus有先后顺序，readonly 先为true再为false
完整代码
<!-- html -->
<el-form-item prop="password">
<div slot="label" class="slot_label">签名人密码</div>
<el-input
type="password"
name="password"
v-model="otherForm.password"
readonly
@focus="onFocus"
@blur="onBlur"
@input.native="onInput($event, otherForm.password)"
@mousedown.native="onMousedown"
></el-input>
</el-form-item>
// js
// 获取焦点
onFocus(event) {
setTimeout(function () {
event.target.readOnly = false
}, 100)
},
// 失去焦点
onBlur(event) {
event.target.readOnly = true
},
// 防止内容删完时出现账号和密码
onInput(event, val){
if(val.length === 0){
this.onBlur(event)
this.onFocus(event)
}
},
// 防止多次点击时出现账号和密码
onMousedown(event){
this.onBlur(event)
this.onFocus(event)
},
注意：vue的input时间默认参数是输入框的value值，如果要获取节点信息，需要加 .native修饰符
暂时只能考虑到这几种情况，也暂时解决了我的需求，如果有大佬发现还有没有考虑到的盲区，恳请批评指正~~
版权声明：本文标题：解决浏览器自动弹出账号和密码问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725798657a1043297.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论