---

场景

当我进入此页面得时候，输入框自动补全了账号和密码，而且输入框获取焦点时会有账号和密码提示

---

需求

从账号安全角度来说，不希望用户每次都能直接记住密码登录，而是希望用户每次都能自己输入账号和密码

---

试错

不知道是不是谷歌浏览器得原因，百度了好多种方案，都不能满足我的需求

1. 加属性 autocomplete=“off”
   ------------------- 没啥用
2. <input type=“text” style=“height: 0;opacity: 0”>
   ------------------- 在input框前面或者后面加上这行代码， 这个看网上貌似解决了一些人的问题，但是对我仍然没有一点用
3. 加属性 autocomplete= “new-password”
   ------------------- 有点用，用处在于可以去掉自动补全，但是去掉浏览器的自动提示
4. 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个方法控制

1. 获取焦点 focus事件
   让readonly为false
2. 失去焦点 blur事件
   让readonly为true
3. 删掉内容时 input事件
   判断输入框内容为空时，直接调用blur和focus
   — 对backspace键、delete键一个个删除和多个删除均有用
4. 鼠标按下 mousedown事件
   直接调用blur和focus
   — 防止鼠标多次点击输入框时出现提示

注意：调用blur和focus有先后顺序，readonly 先为true再为false

完整代码

<!-- html -->
<el-form-item prop="password"><div slot="label" class="slot_label">签名人密码</div><el-inputtype="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修饰符

暂时只能考虑到这几种情况，也暂时解决了我的需求，如果有大佬发现还有没有考虑到的盲区，恳请批评指正~~