无论是小程序还是普通的Html页面，我们都会多次使用输入文本框。本文主要讲一些在小程序中使用文本框进行聚焦并自动拉起输入键盘的经验。

为什么我需要集中注意力，拉起键盘？我为什么放弃失焦事件？

因为我在我的小程序文章中提供了评论文章的功能，所以我想在昨天有空的时候做一下回复评论的功能。我想共享一个包含回复和评论的文本框，如下图1所示。我来解释一下操作：我们进入文章界面，输入框模式默认为评论文章，但是如果我们点击回复，就会出现图2的情况，文本框中会出现回复XXX的评论。这里有一个过程：当我们点击回复时，我们首先聚焦文本框(focus='{{focus}}为真时会聚焦)，在手机上自动拉起输入框，然后将'回复XXX的评论'赋给文本框。为什么要给文本框赋值？因为我用的是‘文字内容’。indexOf('[回复XXX的评论：]')==0 '区分是回复文章还是评论。

开始的时候，我不是这样设计的。我当时的想法是：既然点击回复会集中拉起文本框，我当时是在失焦的时候把文本框改成评论文章，但是测试的时候出现了一个问题：我点击回复的时候，文本框失焦触发的方法是在触发回复按钮之前，也就是回复评论变成了评论文章。当时，一种解决方案是使用计时器来延迟失焦事件方法体的执行。虽然取得了效果，但也存在一些问题：当用户回复评论时，突然不想评论了，点击屏幕上的其他地方。此时，按钮应更改为立即发布，文本框中的占位符变为评论文章。但是由于延迟，过一段时间会改回来，不太友好。那我们该怎么办？我记得CSDN回复评论的功能。我们回复评论的时候，会带来replyXXX的效果。不知道这是不是回复文章和回复评论的区别，然后我就做了。让我们来看看具体的实现

然后让我们具体看看代码：

input bind input=' 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=' getuserninfo ' lang=' zh _ CN ' bind getuserninfo=' ongotutser On info ' { insert request } }/in我们主要看JS:

首先我们需要看一下点击回复拉起键盘的事件：代码中的id是文章评论的ID，名字是评论者的名字，焦点设置为true，insertorfeed是按钮显示的值，开始是评论，点击回复后按钮变成回复，占位符变成回复评论，内容自动添加“[回复XX评论]”。

feedbackCom:函数(e){ var id=e . current target . dataset . id var name=e . current target . dataset . name var index=e . current target . dataset . index console . log(id name index)Setdata({ id : id，index: index，focus: true，insertfeed :' reply '，comorfeed:' reply comments '，content : '[reply to ' name ' comment]3333:如果存在this.data.id，我们需要判断内容是否包含“[回复XXX的评论]:”，如果存在，说明是回复评论而不是文章(我们需要main indexOf==0才算回复评论，因为只有前面是真的，不包含才是真的)。如果不包含解释，【回复XXX评论】:’被人为删除，那么我们会考虑回复文章，然后清除所有与回复相关的数据(一个小问题是我已经清除了这里的所有内容，所以你可以截取字符串，只删除【回复XX评论】)

Wxsearching输入：函数(e) {this。setdata ({content:e。细节。value })//如果点击评论的回复，This.data.id会有if (this.data.id) {console.log('点击回复存在')//判断内容是否包含“[回复XXX的评论]:”if(this。的data.content.index('回复'此。data.statement.statement [this。data.index]。username ' comment]: ')==0){ console . log('确定是回复注释' this . data . statement . statement[this . data . index]。username)} else {console.log('有点击回复，但已被删除。所以是一篇评论文章’)//明确关于回复的所有数据。this.setdata ({id: ' '，content3360 ' '，comorfeed 3360' review article '，insertorfeed:' publish '，})}} else {console.log('没有点击回复。直接评论文章')}}，因为我们在输入的时候做了一系列的判断，所以提交的时候非常容易：首先判断内容是否为空，然后通过判断comorfeed来判断是回复文章还是评论。如果是对评论的回复，我们应该在提交之前删除文本的前缀

/* * *用户提交内容并获取用户信息*/ongotserinfo :函数(e) {console.log ('xxx1')/* * *检查评论内容是否为空*/if(！this . check content(this . data . content)){ return；}/* * *如果用户授权，可以获取数据；否则，用户拒绝授权。那么建议你不能评论*/if(e . detail . user info){ if(this . data.comorfeed==' comment article '){//评论console . log(this . data.comorfeed)allreq . user log in(e . detail . userinfo . nickname，e.detail.userInfo.avatarUrl，e.detail.userInfo.gender，this.data.content，this . data . articleid，0)；} else {console.log('回复评论')console . log(this . data . id)varco=this . data . content . split('回复' this . data . statement . statement[this . data . index]。username ' comment]: ')；console . log(co)allreq . user log in(e . detail . userinfo . nickname，e.detail.userInfo.avatarUrl，e.detail.userInfo.gender，co[1]，this . data . artical id，this . data . id)；}这个。setdata ({content: ' '，id: ' '，comorfeed :' review article '，insertorfeed:' publish '，})else { remind . modal(' prompt '，'让大家在评论前认出你')}}其实实现聚焦并不难，但是用API很容易实现。有点麻烦的是一系列的判断，因为既然用了对焦，肯定不只是拉起键盘那么简单。你最终想要达到的肯定需要进一步提升。这个时候，你有必要分析一下自己的需求，是不是注意力不集中，还是和我一样。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。