在 Web 中實現(xiàn)表情符號的輸入

來自微博和微信的兩種風格

• 一種是像微信這樣，只用純文本，通過類似[旺柴]這樣的符號標識來替代表情，最后輸出時再顯示成真正的表情。
• 另一種是像微博這樣，所見即所得，輸入框本身就是表情和文字混合在一起。

表情圖和文字在一起的場景

<div contenteditable="true"></div>

表情的顯示

<div contenteditable="true">
    一條帶表情<img src="/path/to/emoji/3.gif"><img src="/path/to/emoji/3.gif">的微博<img src="/path/to/emoji/9.gif">
</div>

表情輸入功能的要點

• 點擊下方的表情，就將該表情對應的HTML代碼插入到輸入框<div>。
• 表情HTML代碼插入的位置要符合輸入框<div>的當前光標位置。

Selection 和 Range

• 一種是有一個不斷閃爍的光標，表示著當前正在輸入或準備輸入的位置。它一般只出現(xiàn)在網(wǎng)頁的可以輸入的元素內(nèi)，比如文本輸入框。
• 另一種是一部分內(nèi)容呈現(xiàn)藍底白字（這個顏色可以修改，但默認是這個顏色）的狀態(tài)，表示當前被選中。它可以出現(xiàn)在任意的網(wǎng)頁元素內(nèi)，我們也常用來部分復制網(wǎng)頁內(nèi)容。

Range的設(shè)計意義

• getRangeAt(i) - 按索引獲取Selection的當前Range。除Firefox外，其他瀏覽器只固定使用索引0。
• addRange(range) - 將range應用到Selection。除Firefox外，如果Selection當前已經(jīng)有其他Range，將忽略此方法調(diào)用。
• removeRange(range) - 從Selection中取消應用range。
• removeAllRanges() - 取消應用所有Range。
• empty() - 等同于removeAllRanges()。

符合光標位置的表情插入

<div 
    ref="inputBox" 
    class="input-box" 
    contenteditable="true"></div>

document.onselectionchange = () => {
    let selection = document.getSelection();

    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);

        if (vmEmoji.$refs.inputBox.contains(range.commonAncestorContainer)) {
            rangeOfInputBox = range;
        }
    }
};

insertEmoji (name) {
    let emojiEl = document.createElement("img");
    emojiEl.src = `${this.emoji.path}${name}${this.emoji.suffix}`;

    if (!rangeOfInputBox) {
        rangeOfInputBox = new Range();
        rangeOfInputBox.selectNodeContents(this.$refs.inputBox);
    }

    if (rangeOfInputBox.collapsed) {
        rangeOfInputBox.insertNode(emojiEl);
    } else {
        rangeOfInputBox.deleteContents();
        rangeOfInputBox.insertNode(emojiEl);
    }
    rangeOfInputBox.collapse(false);
}

完善點擊表情時的光標置位

<div 
    ref="inputBox" 
    @click="handleBoxClick"
    class="input-box" 
    contenteditable="true"></div>

handleBoxClick (event) {
    let target = event.target;
    this.setCaretForEmoji(target);
},
setCaretForEmoji (target) {
    if (target.tagName.toLowerCase() === "img") {
        let range = new Range();
        range.setStartBefore(target);
        range.collapse(true);
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(range);
    }
},

用純文本符號來替代表情的場景

<input
    ref="formInput"
    @keydown="handleFormInputKeydown" 
    class="form-input"
    type="text">

• 點擊下方的表情，就將該表情對應的純文本符號插入到輸入框<input>。
• 純文本符號的插入位置要符合輸入框<input>的當前光標位置。

按光標位置來插入純文本

• input.selectionStart - 選擇的起始位置。它的值是一個索引數(shù)字，比如6。
• input.selectionEnd - 選擇的結(jié)尾位置。值的格式同上。
• input.selectionDirection - 選擇的方向?？蛇x值"forward","backward"和"none"。一般對應的情況是指鼠標拖拽選擇時是從前向后，還是從后向前，又或者是雙擊選中。

insertEmojiText (name) {
    let input = this.$refs.formInput;
    let emojiText = `[${name}]`;
    input.focus();
    input.setRangeText(emojiText, input.selectionStart, input.selectionEnd, "end");
    input.blur();
}

退格鍵支持 - 以表情符號為整體刪除文本

handleFormInputKeydown (event) {
    let input = this.$refs.formInput;
    let chatString = input.value;

    // "Backspace" and selection type "Caret"
    if (event.keyCode === 8 && input.selectionStart === input.selectionEnd) {
        let indexEnd = input.selectionStart - 1;
        let charToDelete = chatString.charAt(indexEnd);

        // delete the whole [***]
        if (charToDelete === "]") {
            event.preventDefault();
            let indexStart = chatString.lastIndexOf("[", indexEnd);
            input.setRangeText("", indexStart, indexEnd + 1, "end");
        }
    }
}

完整代碼示例

• 微博風格（表情圖和文字一起）
• https://codesandbox.io/s/emoji-input-contenteditable-75qe8
• 微信風格（表情用純文本符號替代）
• https://codesandbox.io/s/emoji-input-text-yqfe3

補充

光標顏色

input {
    caret-color: red;
}

輸入法里的表情字符

定義虛擬鍵盤的動作鍵

<div
    ref="inputBox" 
    enterkeyhint="send"
    contenteditable="true"></div>

結(jié)語