问题背景
公司项目中登录页为了方便,需要允许浏览器自动填充账号密码。这个在很多项目都很常见,但是测试中出现了这样一个问题:视觉上已经自动填充账号密码,
但是当点击密码的小眼睛或者点击登录时,会清空掉填充的数据,后面经排查、测试发现只要失焦时就会清空。
排查思路
1、确定下来是首次进入自动填充输入框时,已经给表单赋值了,只是失焦的时候表单被清空,还是一直就只是视图填充,实际并未把数据绑定到表单上。
基于这个想法,给表单加了监听,发现虽然看着已经填充数据了,但是表单上的数据一直为空,后面失焦,输入框清空,表单数据也并未变化过。结合多次验证,认为是浏览器自动填充账号密码,导致首次vue双向绑定失效,失焦时,loginForm数据为空,从而出现输入框清空的现象。
2、梳理原因后,想着既然能看到输入框input的数据,那么理论上就可以获取到元素的value值。双向绑定失效,那就在合适的时机手动赋值。
实现逻辑:失焦时可以判断一下表单数据是否为空,如果为空,就去获取input框的值,获取到的如果不是空值,就可以认为数据首次未绑定成功,此时把获取到的value值手动赋给表单,这样,失焦时,由于表单有数据,输入框不会出现清空现象,而且视图和表单的数据均有值,就可以解决该问题。
代码实现
(1)给用户名和密码输入框都绑定一个失焦事件userNameOnBlur,只要触发失焦,比如点了空白区域,点了登录按钮等,就去判断一下表单的两个数据是否为空,
(2)如果为空,就需要去读取一下填充到输入框上的数据,手动赋值给表单。
$refs:是 ref 的集合,集合里面包含了当前.vue中的所有 ref,用于获取普通元素中的 DOM 以及 子组件中方法/参数等;
$el:用于获取组件内 DOM(包括子组件,当前.vue组件,以及父组件)。
注意:
这里需要$refs和$el结合才能获取到元素,从而拿到value值。通常获取元素dom我们只需要$refs.xxx即可,但是由于这里用的不是原生input标签,而是iView组件库的input组件,组件本身不是DOM,所以需要.$el的帮助才能提取到组件的DOM。
总结
该问题也不是什么很难解的问题,主要是记录一下排查问题的过程,也和大家分享一下排查思路。当然,如果遇到类似的问题,也有一个方向可以参考。