解决uniapp中editor写入表情时软键盘盘弹出问题

3 篇文章 0 订阅
1 篇文章 0 订阅
本文介绍了一种方法来处理在聊天应用中,使用表情时导致的软键盘频繁弹出和隐藏的问题。通过定义一个定时器函数hideKeyboardMain(),并在插入表情时启动,配合监听编辑器的点击事件,实现软键盘的及时关闭,从而避免了键盘闪现的用户体验问题。
摘要由CSDN通过智能技术生成

很多人做聊天的时候会碰到这样的问题,使用editor做单纯文字聊天没事,但是加上表情就难受了,因为一写入表情就获取了焦点,然后软件盘就出来了,结合网上的经验这里总结下,话不多说,代码示例,
1.定义个函数写入以下代码,this.hideKeyboardTime这个东西随便定义就行在data里。

hideKeyboardMain(){
				this.hideKeyboardTime = setInterval(function() {
					uni.hideKeyboard(); //隐藏软键盘  
				}, 10);
			},

2.写入表情的时候开启这个定时器,因为我组件分离了,所以用了全局的uni.$emit没用分离的直接调就行。

uni.createSelectorQuery().select('#editor').context((res) => {
					uni.$emit("hideKeyboardTime")//其他没用,主要是这句启用定时器
					this.editorCtx = res.context
					this.editorCtx.insertImage({
						src: require('../../../static/chatEmog/' + item.value + '.png'),
						width: "20upx",
						height: "20upx",
						extClass: "extClass",
						data: item.value
					})
					
					

				}).exec()

3.但是定时肯定不能一直这样调用吧,所以在写入文字的时候需要把这个鬼东西停止了。 注意下,我下面的editorTap用的是点击事件而非是获取焦点之类的,因为点击事件会快过焦点事件,所以写在这里可以更快停止定时器,不然软键盘还是会弹出来一下,

<editor id="editor" @click="editorTap" @input="editorChange" :cursor-spacing="1000"   class="chat-room-send-top-input"
		 :placeholder="$translationMain('请输入消息')"></editor>
editorTap(){
				if(this.hideKeyboardTime){
					clearInterval(this.hideKeyboardTime);
				}
				uni.$emit("editFocus", false)
				this.$emit("editorTap")
			},

以上操作就可以做到彻底隐藏软键盘了,不会出现跳一下又隐藏。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值