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.mzph.cn/web/57418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pip命令行安装pytest 一直报错

其实就是切换不同镜像安装 我最终成功的是阿里云镜像 pip install --trusted-host mirrors.aliyun.com pytest 也可以用其他的 pip install -i https://pypi.org/simple pytest # 或者使用其他的镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pytest

【339】基于springboot的新能源充电系统

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;新能源充电系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解…

为什么 C 语言数组是从 0 开始计数的?

C 语言等大多数编程语言的数组从 0 开始而不从 1 开始&#xff0c;有两个原因&#xff1a; 第一&#xff1a;地址计算更方便 C 语言从 0 开始的话&#xff0c;array[i] 的地址就正好是&#xff1a; (array i) 如果是从 1 开始的话&#xff0c;就是 (array i - 1) 多一次计…

`map` 是 JavaScript 数组的一个高阶函数,用于对数组中的每个元素进行操作,并返回一个新的数组

文章目录 map 方法的作用语法示例 具体到你的代码完整代码片段总结 当然可以解释一下 map 方法的作用。 map 方法的作用 map 是 JavaScript 数组的一个高阶函数&#xff0c;用于对数组中的每个元素进行操作&#xff0c;并返回一个新的数组。新数组的每个元素是原数组中对应元…

代码随想录day15 二叉树(3)

文章目录 day11 栈与队列(2)栈与队列的总结 day13 二叉树&#xff08;1&#xff09;day14 二叉树&#xff08;2&#xff09;day15 二叉树&#xff08;3&#xff09; day11 栈与队列(2) 逆波兰表达式求值 https://leetcode.cn/problems/evaluate-reverse-polish-notation/ 逆…

计算机毕业设计Python+大模型股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; Python大模型股票预测系统 …

[山河CTF 2024] week3

一周不在家&#xff0c;这是补的最后一篇。后边的还有0xgame和shctf的末周。打不动了。 Crypto Approximate_n 题目分两部分&#xff0c;flag分两块两个RSA&#xff0c;第1个泄露了4个n_approxkpr的值&#xff0c;后边只泄露了1个。 第1部分利用以前的模板&#xff0c;造格…

基于SSM+VUE园艺生活植物网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

C++初阶(八)--内存管理

目录 引入&#xff1a; 一、C中的内存布局 1.内存区域 2.示例变量存储位置说明 二、C语言中动态内存管理 三、C内存管理方式 1.new/delete操作内置类型 2.new和delete操作自定义类型 四、operator new与operator delete函数&#xff08;重要点进行讲解&#xff09; …

基于vue框架的的驾校预约车辆管理系统设计与实现jwoqj(程序+源码+数据库+调试部署+开发环境)系统界面在最后面

系统程序文件列表 项目功能&#xff1a;学员,教练员,驾校车辆,车辆信息,车辆类型,预约信息,时间段,教学课程,上报维修,维修内容,练车记录,取消信息 开题报告内容 基于Vue框架的驾校预约车辆管理系统设计与实现开题报告 一、研究背景与意义 随着驾驶培训行业的快速发展&…

JVM结构图

JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;负责将Java字节码翻译成机器码并执行。JVM由多个子系统组成&#xff0c;包括类加载子系统、运行时数据区、执行引擎、Java本地接口和本地方法库。 类加载子系统&#xff08;Class Loading Subsy…

IDEA 打包首个java项目为jar包

新建java项目 创建一个java项目&#xff0c;使用Maven进行项目构建&#xff0c;高级配置方面主要设置了项目包版本等信息。 依照步骤生成相关的项目。 设置maven环境 从项目设置中查找maven相关配置 设置&#xff08;settings&#xff09;-》构建、执行、部署&#xff08;B…

【ARCGIS实验】地形特征线的提取

目录 一、提取不同位置的地形剖面线 二、将DEM转化为TIN 三、进行可视分析 四、进行山脊、山谷等特征线的提取 1、正负地形提取&#xff08;用于校正&#xff09; 2、山脊线提取 3、山谷线的提取 4、河网的提取 5、流域的分割 五、鞍部点的提取 1、背景 2、目的 3…

达梦数据库在终端/控制台交互查询SQL语句,查询结果导出excel

达梦数据库在终端/控制台交互查询SQL语句&#xff0c;查询结果导出excel 依赖 安装JDK&#xff0c;maven引入达梦包&#xff0c;maven打包主类改成查询工具类&#xff0c;即可放到linux平台运行 <dependency><groupId>com.dameng</groupId><artifactId…

【Linux】设备树

设备树简介 我们前面介绍过平台设备驱动&#xff0c;知道硬件资源信息可以放在设备中&#xff0c;然后在驱动的probe函数中从设备中获取资源信息。但是&#xff0c;Linux3.x以后的版本引入了设备树&#xff0c;设备树用于描述一个硬件平台的硬件资源&#xff0c;一般描述那些不…

node和npm版本冲突

问题描述&#xff1a; 解决办法&#xff1a; 一、 查看自己当前的node和npm版本 node -v npm -v 二、 登录node官网地址 node官网地址 https://nodejs.org/zh-cn/about/previous-releases 查看与自己node版本兼容的是哪一版本的npm,相对应进行更新即可。 三 升级node 下载最…

笑死人不偿命的联想:大象是什么?

element&#xff08;元素&#xff09;一词&#xff0c;起源不明。但是它长得很像elephant&#xff08;大象&#xff09;一词&#xff0c;其同通部分为ele-这一结构&#xff0c;因此我们很容易将两个单词进行拆分出来&#xff1a; element n.元素 // ele ment名缀elephant n.大…

书生-第四期闯关:完成SSH连接与端口映射并运行hello_world.py

端口映射完成后&#xff0c;访问127.0.0.1&#xff1a;7860成功展示如下界面&#xff1a; 书生浦语大模型实战营 项目地址&#xff1a;https://github.com/InternLM/Tutorial/

DBT踩坑第三弹

1. dbt在获取元数据信息的时候&#xff0c;底层使用pyHive的时候database信息没有传进去&#xff0c;pyHive默认又是会设置databasedefault&#xff0c;如果没有default库权限的&#xff0c;这个时候就会抛出Access异常。所以此时最好修改下 dbt-spark 的源码&#xff0c;把dat…

Codeforces Round 966 (Div. 3)

D. Right Left Wrong 题意 思路 我们可以先预处理前缀和&#xff0c;然后贪心每次找最左边的L和最右边的R&#xff0c;计算区间和&#xff0c;然后缩小区间重复操作即可 时间复杂度 O(N) void solve() {int n;cin >> n;vector<int> arr(n 1);vector<int>…