elementui浏览器密码自动填充（element下拉框点击事件）

如何关闭浏览器弹出窗口拦截功能 element ui input密码输入框阻止Chrome浏览器弹出用户名密码下拉框

一、解决方案的 逻辑

1、找到触发【用户密码弹出框】的事件

在密码框的内容为空的情况下，点击密码框会弹出【用户密码弹出框】

在清空密码框中的密码，会弹出【用户密码弹出框】

2、在【用户密码弹出框】弹出之前阻止其弹出

通过mousedown事件设置密码框为readonly,阻止浏览器弹出【用户密码弹出框】

通过watch密码框中的密码，在密码为空的时候设置设置密码框为readonly,阻止浏览器弹出【用户密码弹出框】

在密码框设定为readonly后，立即再通过setTimeout 取消密码框的readonly属性，这样阻止【用户密码弹出框】弹出后，立即让密码框可输入，用户感觉不到只读设定

二、建立一个测试vue页面，输入如下内容

ltel-form-item label=#34新密码#34gt ltel-input v-model=#34pwd.oldPwd#34 :show-password=#34true#34 placeholder=#34请输入新密码#34 ref=#34oldPwd#34 auto-complete=#34new-password#34 :readonly=#34pwd.oldPwd == #39#39 pwd.oldPwdReadonly#34 name=#34oldPwd#34 @mousedown.native=#34oldPwdMousedownHandle#34 @focus=#34oldPwdFocusHandle#34 @blur=#34oldPwdBlurHandle#34gt lt/el-inputgtlt/el-form-itemgt

三、添加Js内容

var vm = new Vue({ el: #39#app_fran#39 , data: { , pwd: { oldPwd: #39#39 , oldPwdReadonly: false , newPwd: #39#39 , newPwdReadonly: false , rptPwd: #39#39 , rptPwdReadonly: false } } , watch: { //监控密码内容 #39pwd.oldPwd#39: function (newVal, oldVal) { inewVal===#39#39 this.oldPwdFocusHandle() } } , methods: { //mousedown事件阻止密码选择框弹出 oldPwdMousedownHandle: function () { this.oldPwdFocusHandle() } //focus事件阻止密码选择框弹出 , oldPwdFocusHandle: function () { this.pwd.oldPwdReadonly = true setTimeout(() =gt { this.pwd.oldPwdReadonly = false }, 10) } //blur事件后设定密码框为只读，以便focus后阻止密码选择框弹出 , oldPwdBlurHandle: function () { this.pwd.oldPwdReadonly = true } }})

element下拉框点击事件 elementui下拉框出现隐藏事件