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)

您必须创建新的范围，因为它在内容可编辑的新输入后被破坏了

在jQuery追加到contentEditable div之后设置游标

1 个答案: