问题描述
如下图所示,移动端的输入框,后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑,但是实现的时候,点击清除按钮,键盘就自动收起了,而且也触发了校验逻辑。交互要求:输入文本的时候键盘是弹起来的,此时点击清除按钮,不让键盘收起;输入完成后,收起键盘,此时点击清除按钮,需要聚焦到input里,且弹起键盘
原因
input点击事件与失焦事件冲突了,在click的时候会先触发blur事件,再触发click事件
解决方案
1、思路
- 监听清除按钮的mousedown事件,阻止默认事件,即阻止点击后默认失焦的事件
- 清除按钮的点击事件里,手动聚焦输入框
2、具体代码
我的项目是用vue写的,所以下面代码实现也是vue的写法,可以根据框架自行调整
template部分
<my-input
v-model="amount"
:maxlength="9