首先,我的难点是:只要输入框聚焦(输入表情,输入文字),就会自动唤醒手机输入,这时候,我的表情输入框和输入法就冲突了。
微信是这样的:
输入表情的时候,输入框聚焦了,但是输入法没出现,这个点我想过是不是这个光标是模拟的,其实输入框是失焦的。
输入框代码(contenteditable):
<div contenteditable="true" ref="editArea" class="edit-area"
@focus="contentFocus" @blur="contentBlur">
</div>
添加表情的代码:
addImage (e) {
/**
* 点击emoji图片后,复制节点添到当前range里并设置光标和更新range
* 若是点到其他地方则设置到之前的位置
*/
// if (e.target.tagName === 'IMG') {
let node = e.target.cloneNode(true)
//如果已经有光标,删除
let guangbiao = document.querySelector(".edit-area").querySelector(".headerBox")
if (guangbiao !=null) {
this.$refs['editArea'].removeChild(guangbiao)
}
//这是我模拟的光标
let cursor = document.getElementById('haha').cloneNode(true)
this.range.insertNode(cursor)
this.range.insertNode(node)
this.setCursor(node, false)
// } else {
// this.setCursor()
// }
},
setCursor (node, before) {
/**
* node 为传入的节点,不传则foucs到之前保存的位置
* before 控制折叠方向
*/
// if (node) {
// 需要新建一个range来添加内容
let range = document.createRange()
range.selectNode(node)
range.collapse(!!before)
this.selection.removeAllRanges()
// this.selection.addRange(range)
// range = this.selection.getRangeAt(0)
// let cursor = document.getElementById('haha')
// range.insertNode(cursor)
// 更新 range
this.range = range
// }
// else {
// this.selection.removeAllRanges()
// // 使用之前的
// this.selection.addRange(this.range)
// }
},
我是通过range来做表情(图片)插入的,然后再往rang里加一个模拟光标的元素。
先抛开我的做法,想问问大家的思路,再如果在我的基础上,需要怎么改进。