場景

類似于微信聊天的一個對話框,要求可以使用EMOJI表情,對話框是一個div,通過改變contentEditable屬性使得內(nèi)容可以編輯.

問題

Emoji表情在頁面中其實是GIF格式的IMG標(biāo)簽.如果直接在innerHTML中改變,會導(dǎo)致表情包只出現(xiàn)在文本最后,所以這樣是不符合用戶體驗的,需要跟蹤光標(biāo)的位置.在用戶點擊文本或者文本框失去焦點時候保存光標(biāo)位置,點擊表情時在光標(biāo)最后位置插入.

div.innerHTML +=

思路

1.webkit內(nèi)核的瀏覽器中可以直接使用getSelection()獲取selection對象.以及其中的range對象

range(范圍)指的是文檔中連續(xù)的一部分。一個范圍包括整個節(jié)點，也可以包含節(jié)點的一部分，例如文本節(jié)點的一部分。用戶通常下只能選擇一個范圍

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

在div的onclick以及onblur事件中綁定保存光標(biāo)位置

saveSelection() {

this.lastEditRange = window.getSelection().getRangeAt(0);

}

2.在添加表情事件觸發(fā)時,首先檢查是否存在光標(biāo)位置,如果存在則在最后位置插入,不存在就在文本末尾插入

// 判斷是否有最后光標(biāo)對象存在

if (this.lastEditRange) {

// 存在最后光標(biāo)對象，選定對象清除所有光標(biāo)并添加最后光標(biāo)還原之前的狀態(tài)

selection.removeAllRanges()

selection.addRange(this.lastEditRange)

}

3.最后就是對光標(biāo)位置的處理

// 如果是文本節(jié)點則先獲取光標(biāo)對象

var range = selection.getRangeAt(0)

// 獲取光標(biāo)對象的范圍界定對象，一般就是textNode對象

var frag;

if (range.createContextualFragment) {

frag = range.createContextualFragment(emojiInput);

} else {

var container = document.createElement("div");

container.innerHTML = emojiInput;

frag = document.createDocumentFragment();

var child;

var title;

for (; child = container.firstChild;) {

title = frag.appendChild(child);

}

}

var node = frag.lastChild;

range.insertNode(frag);

range.setStartAfter(node);

selection.removeAllRanges();

selection.addRange(range);

4.最后還是要保存一次光標(biāo)位置.

效果展示

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的linux版微信 能发表情包的,仿微信在对话框文字中插入Emoji表情包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。