很多人做聊天的时候会碰到这样的问题,使用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")
},
以上操作就可以做到彻底隐藏软键盘了,不会出现跳一下又隐藏。