jquery - 通过jQuery追加到contentEditable div后设置光标

Question

我有带微笑的 div 和 contenteditable div：

<div id="smiles">
    <img src="/img/smile/acute.gif">
    <img src="/img/smile/aggressive.gif">
    <img src="/img/smile/bad.gif">
    <img src="/img/smile/biggrin.gif">
    <img src="/img/smile/blum1.gif">
    <img src="/img/smile/blush.gif">
    <img src="/img/smile/boredom.gif">
    <img src="/img/smile/bye.gif">
    <img src="/img/smile/clapping.gif">
    <img src="/img/smile/congratulate.gif">
    <img src="/img/smile/cool.gif">
    <img src="/img/smile/cray.gif">
    <img src="/img/smile/dance.gif">
    <img src="/img/smile/dance2.gif">
</div>
<div contenteditable="false" unselectable="true" style="disabled:true" id="message_text"></div>

和 jQuery 代码：

$("#smiles").on('click', 'img', function () {
    if ($('#message_text').prop("contentEditable") == 'true') {
        $('#message_text').append($(this).clone()).focus();
    }
});

附加光标后在附加微笑之前保持不变，但我需要在之后设置它

Answer 1

JS纯解决方案

您可以通过使用这些类Selection、Range 和使用方法setStartAfter来导航光标来做到这一点

let range = document.createRange()
let sel = window.getSelection()  
let smile = document.getElementById('smile')
range.setStartAfter(smile.childNodes[smile.childNodes.length -1 ])
range.collapse(true)
sel.removeAllRanges()        
sel.addRange(range) 

您必须创建新范围，因为它在 contenteditable 新输入后被破坏