项目场景:
uniapp编译后的小程序端,app端 在一个输入框 输入消息后,点击键盘上的操作按钮之后键盘不被收起,点击其他发送按钮时,键盘也不被收起。
问题描述
在编译后的app上普通的事件绑定,@tap,@click在发送事件上,每次点击发送后,input框就失焦了,键盘就被收起了。
解决方案:
因为uniapp有编译成app和小程序,就有两端的解决方案,app和小程序不兼容
小程序端:
需要设置:hold-keyboard,confirm-hold 这两个属性为true,hold-keyboard只兼容小程序。
文档:input | uni-app官网
<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
<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>