uniapp富文本editor在插入emoji表情后,如何不显示软键盘?
在选择emoji表情后,刚开始用的是insertText{text:emoji表情},表情是插入了,但是由于输入框有了焦点,自动弹出了软键盘,并且收起了emoji表情面板,如果需要再次选emoji很麻烦,得再次点击emoji选择面板按钮。
后来富文本editor 加了:read-only="isReadOnly",选择emoji表情后readOnly设置为true,由于富文本状态为只读,导致insertText无法插入表情。
<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方法使富文本编辑器失去焦点。
tuchEmoj(item) {this.isReadOnly = true;this.$nextTick(() => {this.editorCtx.getContents({success: (res) => {this.editorCtx.setContents({html: res.text + item,complete: () => {this.isReadOnly = falsethis.editorCtx.blur()}})}})})}
这种的话软键盘不会突然闪现,也不会由于readonly为只读导致无法插入emoji表情。
效果: https://live.csdn.net/v/494264