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

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

成都创新互联公司主要从事做网站、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务枞阳,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

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

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

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

    

那我们来具体的看代码：

<input bindinput="wxSearchInput" focus="{{focus}}" value="{{content}}" class="wxSearch-input search-input" placeholder='{{comorfeed}}' cursor-spacing='20'/>
 
<button class="wxSearch-button items" style='display:flex' size="mini" plain="true" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">{{insertorfeed}}</button>

新闻名称：详解小程序input框失焦事件在提交事件前的处理-创新互联
文章分享：https://www.cdcxhl.com/article8/coopip.html

成都网站建设公司_创新互联，为您提供品牌网站设计、外贸建站、移动网站建设、网站排名、ChatGPT、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联