uniapp富文本editor在插入emoji表情后，如何不显示软键盘？

FinelyYang2025-09-24 16:14

在选择emoji表情后，刚开始用的是insertText{text:emoji表情}，表情是插入了，但是由于输入框有了焦点，自动弹出了软键盘，并且收起了emoji表情面板，如果需要再次选emoji很麻烦，得再次点击emoji选择面板按钮。

后来富文本editor 加了:read-only="isReadOnly",选择emoji表情后readOnly设置为true,由于富文本状态为只读，导致insertText无法插入表情。

javascript 复制代码

<editor id="editor" class="send-text-area" :placeholder="isReceipt ? '[回执消息]' : ''"
						:read-only="isReadOnly" @focus="onEditorFocus" @blur="onEditorBlur" @ready="onEditorReady"
						@input="onTextInput">
					</editor>
<scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true"
				:style="{height: keyboardHeight+'px'}">
				<view class="emotion-item-list" v-for="(items, i) in emoList" :key="i">
					<block v-for="(item, index) in items" :key="index">
						<view class="emoj_parent" hover-class="checkActive" @click="tuchEmoj(item)">
							<text class="emoj_conn">{{item}}</text>
						</view>
					</block>
				</view>
			</scroll-view>

最终使用下面方法解决了。

选择emoji表情后将富文本修改为只读，防止有焦点弹出软键盘。getContents方法获取editor内容，拼接emoji表情后setContents方法重新设置editor内容，完成后，修改富文本状态为可写，使用blur方法使富文本编辑器失去焦点。

javascript 复制代码

tuchEmoj(item) {
				this.isReadOnly = true;
				this.$nextTick(() => {
					this.editorCtx.getContents({
						success: (res) => {
							this.editorCtx.setContents({
								html: res.text + item,
								complete: () => {
									this.isReadOnly = false
									this.editorCtx.blur()
								}
							})
						}
					})
				})
			}

这种的话软键盘不会突然闪现，也不会由于readonly为只读导致无法插入emoji表情。

效果： https://live.csdn.net/v/494264