怎样阻止input输入框失去焦点？

项目上面有这样的一个需求：

当时涉资搜索框的时候，只有当按下回车键的时候，才会发送请求，在下面展示信息，需求可能认为用户操作起来比较麻烦，就让我改成失去焦点和回车的时候都能展示信息，当时我以为也很简单，就是把回车事件改成失去焦点事件，但是没想到就这一出改动，让我花了半天多时间来解决。

后来还是在导师的帮助下才解决的。下面，记录一下，我遇到的问题以及解决的方法：首先遇到第一个问题，就是清空输入框的时候，如果焦点还是在输入框里面，就会出问题。

因为我用的是ant-design-mobile组件的第2.3.1版本，用到的是searchBar组件

在这里有个清空按钮，当我把回车事件改成失去焦点事件的时候，发现清空按钮点击了不起作用，

后来通过打印，知道了，如果在点击清空按钮的时候，焦点还在输入框里面，执行的事件显示失去焦点，然后才是清空事件，至于为什么清空不了，我排查了一下原因，在这段代码里面发现了问题，

但是我后来发现ant-design-mobile里面的searchBar也有这个bug,不知道怎么回事，后来，就发现，如果是执行清空事件的话，先执行的是失去焦点事件，那么这就有问题了，因为执行清空事件，我向后台发送请求携带的参数是空，但是失去焦点事件并不一定是空，也就是会向后台发送两次请求，后来我就想到怎么在执行清空事件的时候阻止失去焦点事件，好像在我所知道的知识之内，并没有这个事件，于是，我就去百度搜索了一下，看到了知乎上面有一个有意思的答案，

怎样阻止input输入框失去焦点？

 于是我就想，这应该可以吧，但是当我把清空按钮做成背景图定位了之后，发现被坑了，我靠，这怎么让我判断点击的区域，此方法不行啊。

后来在导师的帮助下解决的，也是用了一些时间，

解决阻止input输入框失去焦点问题的方法就是：

     其实阻止不了input输入框失去焦点问题，只能给失去焦点事件加一个定时器，让其在一段时间以后执行，

但是这样也不太好啊，白加了个定时器，在组件卸载的时候还得清空，也比较麻烦。

所以最终的方案就是：改需求，把搜索框做成边输入边向后台发送请求的效果。这样用户体验也比较好，在这里也就用到了防抖函数。

 

 

 

 这样用户体验比较好，也能避免之前遇到的bug