uniapp编译多端项目App、小程序,input框键盘输入后

项目场景:

uniapp编译后的小程序端,app端 在一个输入框 输入消息后,点击键盘上的操作按钮之后键盘不被收起,点击其他发送按钮时,键盘也不被收起。


问题描述

在编译后的app上普通的事件绑定,@tap,@click在发送事件上,每次点击发送后,input框就失焦了,键盘就被收起了。


解决方案:

因为uniapp有编译成app和小程序,就有两端的解决方案,app和小程序不兼容

小程序端:

需要设置:hold-keyboard,confirm-hold 这两个属性为true,hold-keyboard只兼容小程序。

文档:input | uni-app官网

html 复制代码
<input
 :confirm-hold="true"
 :hold-keyboard="true"
 ref="inputEle"
class="TUI-message-input-area"
:adjust-position="false"
cursor-spacing="20"
v-model="inputText"
@input="onInputValueChange"
maxlength="140"
type="text"
placeholder-class="input-placeholder"
placeholder="说点什么呢~"
@focus="inputBindFocus"
	@blur="inputBindBlur"
/>

app端:

需要把发送按钮的@tap事件改为@touchend.prevent绑定,confirm-hold这两个属性为true

html 复制代码
<input
:confirm-hold="true"
ref="inputEle"
class="TUI-message-input-area"
:adjust-position="true"
cursor-spacing="20"
v-model="inputText"
@input="onInputValueChange"
maxlength="140"
type="text"
placeholder-class="input-placeholder"
placeholder="说点什么呢~"
/>
<view  class="TUI-sendMessage-btn" @touchend.prevent="sendTextMessage">发送</view>
相关推荐
进击的圆儿23 分钟前
高并发内存池项目开发记录 - 02
开发语言·c++·实战·项目·内存池
從南走到北2 小时前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
软件技术员9 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio9 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q5110082859 小时前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
小Tomkk10 小时前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
说私域10 小时前
基于多模态AI技术的传统行业智能化升级路径研究——以开源AI大模型、AI智能名片与S2B2C商城小程序为例
人工智能·小程序·开源
2501_9160074711 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者813 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
说私域13 小时前
基于开源AI大模型、AI智能名片与S2B2C商城小程序的购物中心精准零售数据架构研究
人工智能·小程序·开源