详解小程序input框失焦事件在提交事件前的处理-创新互联

无论是小程序还是平常的Html页面，input文本框我们用到的次数都很多，这一篇文章主要是讲关于小程序中文本框聚焦自动拉起输入键盘的一些使用心得。

为什么我需要聚焦拉起键盘呢？为什么我弃用失焦事件呢？

因为在我的小程序文章中提供了评论文章的功能，昨天空闲下来我想将回复评论的功能也做一下，我想让回复和评论同时共用一个文本框如下图一，我来说明一下的操作：当我们进入文章界面的时候，输入框模式默认是评论文章的，但是如果我们点击回复就会出现图二的情况，在文本框出现回复XXX的评论，这里有个过程：当我们点击回复的时候首先让该文本框聚焦（focus="{{focus}}为true的时候就会聚焦），手机上会自动拉起输入框，然后在该文本框上赋值"回复XXX的评论"。为什么要文本框赋值呢？因为我用"文本内容.indexOf("[回复XXX的评论:]")==0"来区分是回复文章还是回复评论。

在一开始的时候我并非这样设计的，我当时想的是：既然点击回复会聚焦拉起文本框，那么失焦的时候我在把文本框改为评论文章吧，但是测试的时候就出现了一个问题：我点击回复的时候文本框失焦触发的方法在回复按钮触发之前，也就说回复评论变成了评论文章，当时想到的一个解决办法是定时器，让失焦事件方法体延迟执行，虽然达到了效果，但是也有问题：用户回复评论的时候，突然不想评论了，点击屏幕的其他地方，此时应该立刻按钮变成发表，文本框的placeholder变成评论文章，但是由于延迟所以会过一会才变回去，不太友好。那么怎么办呢？我就想起了CSDN回复评论的功能，我们回复评论的时候会带上replyXXX的效果，我就想这个是不是判断回复文章还是回复评论的区别，然后我就这样做了。我们往下看具体的实现

那我们来具体的看代码：

 
{{insertorfeed}}