目录

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>
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
天_真好3 小时前
小程序知识点总结1
小程序
gurenchang3 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设7 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°9 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
七七小报11 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报13 小时前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand13 小时前
uniapp 仿小红书轮播图效果
uni-app
yuanmenglxb200414 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设15 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理15 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序