当前位置: 首页 > article >正文

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

项目场景:

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>

http://www.kler.cn/a/378201.html

相关文章:

  • 前端Nginx的安装与应用
  • Ghidra无头模式(自动化批处理执行重复性任务)
  • 通过不当变更导致 PostgreSQL 翻车的案例分析与防范
  • 【系统架构设计师】2022年真题论文: 论湖仓—体架构及其应用(包括解题思路和素材)
  • DFS求解迷宫最长移动路线
  • 浅谈UI自动化
  • 半成品 贪吃蛇项目
  • Linux软硬链接
  • C++ 优先算法 —— 查找总价格为目标值的两个商品(双指针)
  • 八、MapReduce 大规模数据处理深度剖析与实战指南
  • 100种算法【Python版】第33篇——Tonelli-Shanks算法
  • vue+element上传图片
  • fmql之Linux以太网
  • chatgpt3.5权重参数有多少MB;llama7B权重参数有多少MB
  • ChatGPT 和 RAG(检索增强生成)的区别;ChatGPT 和 RAG 的联系
  • 【缓存与加速技术实践】Redis 高可用
  • 【AI语音克隆整合包及教程】声临其境,让想象成为现实——第二代GPT-SoVITS引领语音克隆新时代!
  • ChatGPT变AI搜索引擎!以后还需要谷歌吗?
  • 初知C++:继承
  • Ubuntu删除docker
  • Vue 组件生命周期(四)
  • Docker:网络
  • synchronized加锁原理以及锁升级过程
  • 微服务架构深入理解 | 技术栈
  • vue3项目history模式部署404处理,使用 historyApiFallback 中间件支持单页面应用路由
  • 最新指南,如何使用 ChatGPT 提示词指令进行学术写作