2

我正在尝试在插入符号位置插入文本，但在文本中插入表情符号后，我没有收到正确的位置。

我在这里创建了小提琴

我正在使用下面的表情符号jquery 插件

我的页面的 HTML 如下。

<textarea id="message_rule"></textarea>
<br/><br/>
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select Tag
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%NAME%]');return false;">Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%FIRST_NAME%]');return false;">First Name</a>
        <a class="dropdown-item" href="#" onclick="insertAtCaret('message_rule', '[%LAST_NAME%]');return false;">Last Name</a>
    </div>
</div>

我已经尝试过给定HERE的solutoin ，它也仅适用于文本。一旦我插入表情符号，解决方案就不起作用。

如果我只插入文本，我的解决方案就完美了。如果我在其中添加任何表情符号，它将在表情符号之后停止工作。

Javascript

$(document).ready(function() {    
    $("#message_rule").emojioneArea({
        pickerPosition: "bottom"
    });
});

function insertAtCaret(myField,html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}
4

0 回答 0