場景

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

問題

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

div.innerHTML +=

思路

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

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

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

在div的onclick以及onblur事件中綁定保存光標位置

saveSelection() {

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

}

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

// 判斷是否有最后光標對象存在

if (this.lastEditRange) {

// 存在最后光標對象，選定對象清除所有光標并添加最后光標還原之前的狀態

selection.removeAllRanges()

selection.addRange(this.lastEditRange)

}

3.最后就是對光標位置的處理

// 如果是文本節點則先獲取光標對象

var range = selection.getRangeAt(0)

// 獲取光標對象的范圍界定對象，一般就是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.最后還是要保存一次光標位置.

效果展示

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。