通过jQuery将光标附加到contentEditable目录后设置

Question

我有带着微笑的div和满足的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) 

您必须创建新的范围，因为它在可满足的新输入后被破坏