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 新输入后被破坏