在内容可编辑的 div 中嵌套元素时插入符号位置不正确答案

【问题标题】：Incorrect caret position when nesting elements in a content editable div在内容可编辑的 div 中嵌套元素时插入符号位置不正确
【发布时间】：2014-03-14 00:45:20
【问题描述】：

我目前正在做一个项目，在该项目中单击按钮后，一个 div 会插入到插入符号位置的内容可编辑 div 中。

我有一般机制工作，但是在我插入新 div 并单击内容可编辑区域并单击该区域以添加更多光标对齐的文本后，在 chrome 中（我尚未测试其他浏览器）内容可编辑区域的右侧。

如果我在光标在那里时继续输入，文本将按预期位于 div 旁边，并在按下退格键时正确删除。

这是我的 javascript：

createVar = function () {
    var variable = document.createElement('div'),
    nested   = document.createElement('div');

    variable.className = 'msg_var';
    variable.spellcheck = false;
    variable.contentEditable = false;

    nested.className = "msg_var_content";
    nested.innerHTML = "foobar";

    variable.appendChild(nested);
    nested = document.createElement('div');
    nested.className = 'msg_var_remove';
    nested.innerHTML = 'x';
    variable.appendChild(nested);
    nested.setAttribute(
        'onclick',
        'this.parentNode.parentNode.removeChild(this.parentNode);'
    );
    return variable;
}

addVar = function () {
    var body     = document.getElementById('body'),
        variable = createVar(),
        range,
        sel;

    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            range.insertNode(variable);

            range = range.cloneRange();
            range.selectNodeContents(variable);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } 
}

我创建了一个 jsfiddle 来帮助描述我的情况： http://jsfiddle.net/6XAfv/3/

有人知道为什么我插入 div 时光标会移动吗？如何将光标保持在 div 旁边？

【问题讨论】：

不过，它确实有点像胡萝卜。 :)
我的错，更新了帖子

标签： javascript html contenteditable

【解决方案1】：

这是 google chrome 和 safari 中的错误。在Firefox中它工作正常。我花了一段时间想办法解决它。

我的解决方案是，您需要将 contenteditable 包装到另一个包装器。所以插入符号将位于内部 contenteditable 的末尾。

<div id="body">
    <div id="editable" contenteditable="true">
        <span>&nbsp</span>
    </div>
</div>

我们需要在里面有 &nbsp，这样我们才能专注于内部内容。

首先，检查浏览器是Chrome还是Safari，如果是则添加样式。

is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
if(is_chrome && is_safari) is_safari = false;
    if(is_chrome || is_safari){
         var element = document.getElementById('element');
         element.style.display = 'inline-block';
         element.style.width = 'auto';
    }

然后您需要做的就是将焦点放在 contenteditable 上并在文本末尾设置插入符号。

contentFocus = function(){
    setTimeout(function(){
        document.getElementById('editable').focus(); 
    }, 100);
}

我在这里编辑了您的示例 http://jsfiddle.net/6XAfv/4/ 它运行不完美，但您可以通过焦点修复使其轻松运行。

希望这会有所帮助。

【讨论】：