uniapp实现点击input框外发送按钮键盘不收回

最新推荐文章于 2024-05-29 08:39:03 发布
最新推荐文章于 2024-05-29 08:39:03 发布
阅读量464 收藏 6
点赞数 3
分类专栏： uniapp 文章标签： uni-app chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/138954735
版权

场景：在聊天页面中，点击input输入框外面的一个发送按钮，导致input失焦导致键盘自动收回

解决办法

将click点击事件 @click="" 换成 @touchend.prevent=""

<view class="send-btn" @touchend.prevent="sendClick">发送</view>
扶苏1002
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp让输入框保持聚焦状态，不会失去焦点
yy6818的博客
03-07 1668
当输入框还有发送按钮的时候，点击发送希望软键盘不消失，还可以继续输入，或者避免因输入图片标签造成的屏闪问题。多次尝试后发现一个很实用的方法，适用input输入框和editor输入框。
uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起遮挡输入框问题
qq_55460954的博客
11-29 4264
uniapp微信小程序、APP输入框发送消息不失焦问题解决，uniapp iOS键盘遮挡输入框问题解决
uniapp input点击旁边按钮，如何不失去焦点
最新发布
morecccc的博客
05-29 719
uniapp input点击旁边按钮，如何不失去焦点。input手动获取焦点
uniapp-弹出键盘时点击按钮键盘不收起
big_minggogo的博客
03-09 1201
在按钮的事件上@touchend.prevent=“submit”
UNI-APP 解决 点击input框外发送按钮，键盘不收回
一尾流莺 半世情缘
10-26 3011
场景：在聊天页面中，发送消息input输入框后一个发送按钮，点击发送按钮默认收回键盘 input失焦导致键盘收回 一、点击发送时让input重新聚焦:focus="true" 但会先将键盘收起再马上弹出，体验不是很友好 二、将click点击事件 @click="" 换成 @touchend.prevent="" <view class="send-btn" @touchend.prevent="sendClick">发送</view> ...
uniapp 点击input框外键盘不收回
缘来侍你的博客
07-28 3232
场景：在聊天页面中，发送消息input输入框后一个发送按钮，点击发送按钮默认收回键盘（input失焦导致键盘收回） 我需要的是点击发送按钮键盘不收回，发送完一条后可继续发送 一种解决方法，在点击发送的时候让input重新聚焦（:focus="true"）但会先将键盘收起再马上弹出，体验不是很友好 如何点击发送的时候让键盘不收起，一直存在呢？ 解决方法：将click点击事件@click="send"换成@touchend.prevent="send" ...
zjy-easyinput文本框带按钮，uni-easyinput增强版
y393016244的博客
07-16 948
zjy-calendar日历是对uniapp uni-easyinput文本框的增强，支持文本框前后加按钮。
jQuery实现点击按钮文字变成input框点击保存变成文字
10-22
主要介绍了jQuery实现点击按钮文字变成input框点击保存变成文字的相关资料，非常具有参考借鉴价值,需要的朋友可以参考下
点击按钮文字变成input框,点击保存变成文字的实现代码
09-28
下面小编就为大家带来一篇点击按钮文字变成input框,点击保存变成文字的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue input实现点击按钮文字增删功能示例
01-21
本文实例讲述了vue input实现点击按钮文字增删功能。分享给大家供大家参考，具体如下： <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=...
【uniapp 监听键盘弹起与收回】
前端-CV全粘工程师
08-22 4829
在uniapp中，可以通过使用小程序提供的API来监听键盘弹起与收回。通过上述代码，就可以实现在uniapp中监听键盘弹起和收回的功能。
uni-app 给input框添加点击清空按钮
热门推荐
小猫爪子
11-20 1万+
用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！ 效果图 <view slot="default" class="search_box"> <text class="icon_search"></text> <input style="width: 280px;" :value="searchName" class="prompt" placeholder
uniapp微信小程序 实现评论键盘弹出的时候 有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点
T3165919332的博客
08-15 1404
由于我这里出现的问题 是第二个input框聚焦了 然后又马上失焦 然后我考虑可能是第三条的原因 因为我点击第一个input框后就切换了第二个input框的聚焦状态 这里可能切换太快 然后就给改变状态的地方加上了一个定时器 问题就解决啦。：我现在有一个需求就是 要实现输入评论 有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。3. iOS 的键盘有一个晃动检测的机制,如果短时间内聚焦状态频繁切换,会认为是程序错误导致的无意聚焦,会自动还原。
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
奔跑吧代码
09-04 1472
vue3+ts+uniapp实现小程序端input获取焦点计算上推页面距离
uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？
SLife4599的博客
05-25 6039
最近在写微信小程序开发，客服吐槽，点击输入时界面总是被顶起来，输入框也被遮挡了一半，以下是解决方案。 首先将输入框设置为不向上顶页面的参数如下 输入框参数 :adjust-position="false" //键盘弹起时，是否自动上推页面 默认的是true 将其改为false :show-confirm-bar="false" //这个是是否显示完成按钮的 默认也是true 我这边不需要，看情况设置 @focus="getHeight" //输入框聚焦的时候触发 里面是触发的方法名称 可以自行设置 @b
针对input框在uniapp切换type时候内容消失的解决方案
qq_46639390的博客
05-16 722
针对input框在uniapp切换type时候内容消失的解决方案
input点击事件只在右侧图标位置，如何扩大点击事件范围
weixin_43337481的博客
08-29 457
这里的 style="pointer-events:none" 可以在input或easyinput框禁用状态下，将点击事件完整覆盖。
uni-app 开发微信小程序问题：多个输入框在点击切换时，焦点失焦的问题
u012175780的博客
03-14 1835
uni app 开发微信小程序在多个输入框的问题
uniapp 怎么实现点击发送按钮textatea不失去焦点 具体实现代码
03-26
可以使用自定义组件实现，在自定义组件中实现textarea的聚焦和失焦事件，从而避免在点击发送按钮之后自动失去焦点。以下是一个简单的自定义组件示例： 1. 在pages下创建一个custom-textarea文件夹，在该文件夹下创建textarea.vue组件。代码如下： ```html <template> <textarea ref="textarea" :value="textareaValue" @input="textareaInput" @blur="textareaBlur" @focus="textareaFocus" :placeholder="placeholder" :rows="rows" :disabled="disabled" :maxlength="maxlength" :autofocus="autofocus" :style="{ width: width + 'px', height: height + 'px' }" ></textarea> </template> <script> export default { name: 'custom-textarea', props: { value: { type: String, default: '', }, placeholder: { type: String, default: '', }, rows: { type: Number, default: 3, }, disabled: { type: Boolean, default: false, }, maxlength: { type: [Number, String], default: 140, }, width: { type: [Number, String], default: '100%', }, height: { type: [Number, String], default: 80, }, autofocus: { type: Boolean, default: false, }, }, data() { return { textareaValue: '', } }, mounted() { this.textareaValue = this.value if (this.autofocus) { this.focus() } }, methods: { textareaInput(e) { this.textareaValue = e.target.value this.$emit('input', e.target.value) }, textareaFocus() { this.$emit('focus') }, textareaBlur() { this.$emit('blur', this.textareaValue) }, focus() { this.$refs.textarea.focus() }, blur() { this.$refs.textarea.blur() }, }, } </script> <style scoped> textarea { border: none; outline: none; resize: none; font-size: 16px; line-height: 28px; } </style> ``` 2. 在需要使用该组件的页面中引入该组件，并在发送按钮的点击事件中使用`$refs`调用该组件的`blur`方法，从而避免失去焦点。例如： ```html <template> <view class="container"> <custom-textarea v-model="textareaValue" :placeholder="placeholder" :rows="3" :width="300" :maxlength="140" :autofocus="true" ></custom-textarea> <button class="send-btn" @click="handleSend">发送</button> </view> </template> <script> import CustomTextarea from '@/components/custom-textarea' export default { components: { CustomTextarea, }, data() { return { textareaValue: '', placeholder: '请输入内容', } }, methods: { handleSend() { // 发送按钮点击事件 this.$refs.textarea.blur() // 调用自定义组件的blur方法，避免失去焦点 // 其他处理逻辑 }, }, } </script> <style> .container { display: flex; flex-direction: column; align-items: center; } .send-btn { margin-top: 20px; padding: 10px 20px; background-color: #409eff; border-radius: 5px; color: #fff; font-size: 16px; cursor: pointer; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值