解决移动端input点击与失焦事件冲突

问题描述

如下图所示,移动端的输入框,后面是一个清除按钮。业务场景是收起键盘的时候触发校验逻辑,但是实现的时候,点击清除按钮,键盘就自动收起了,而且也触发了校验逻辑。交互要求:输入文本的时候键盘是弹起来的,此时点击清除按钮,不让键盘收起;输入完成后,收起键盘,此时点击清除按钮,需要聚焦到input里,且弹起键盘
在这里插入图片描述

原因

input点击事件与失焦事件冲突了,在click的时候会先触发blur事件,再触发click事件

解决方案
1、思路
  • 监听清除按钮的mousedown事件,阻止默认事件,即阻止点击后默认失焦的事件
  • 清除按钮的点击事件里,手动聚焦输入框
2、具体代码

我的项目是用vue写的,所以下面代码实现也是vue的写法,可以根据框架自行调整

template部分

       <my-input
      v-model="amount"
      :maxlength="9
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决点击保存按钮时先触发点击事件再触发input失焦事件的问题,可以通过以下两种方式来解决: 1. 使用setTimeout延迟失焦事件: 首先,在点击保存按钮时,触发点击事件的同时,使用setTimeout函数来延迟一段时间触发失焦事件。这样,在点击事件触发后,等待一段时间后才会触发失焦事件,确保点击事件先于失焦事件执行。例如: ```javascript document.querySelector('#saveButton').addEventListener('click', function() { // 点击事件处理逻辑 setTimeout(function() { // 失焦事件处理逻辑 }, 100); }); ``` 在上述代码中,使用setTimeout函数来延迟100毫秒后执行失焦事件处理逻辑,确保点击事件先于失焦事件执行。 2. 使用事件捕获阶段和事件委托: 可以通过在包含保存按钮和输入框的父元素上添加事件监听,使用事件捕获阶段来先捕获点击事件,再根据事件目标元素进行判断是否触发失焦事件。这样可以确保点击事件先于失焦事件执行。例如: ```javascript document.querySelector('#parentElement').addEventListener('click', function(event) { if (event.target.id === 'saveButton') { // 点击事件处理逻辑 } else if (event.target.id === 'inputElement') { // 失焦事件处理逻辑 } }, true); ``` 在上述代码中,通过在父元素上添加事件监听,并设置事件捕获阶段为true,可以先捕获到点击事件。然后根据事件目标元素的id判断是点击按钮还是失焦输入框,从而执行相应的事件处理逻辑。这样可以确保点击事件先于失焦事件执行。 以上是两种解决点击保存时先触发点击事件再触发input失焦事件的方法,可以根据具体情况选择适合的方式解决该问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值