Question

我目前正在开发一个项目，在点击按钮后，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旁边？

Answer 1

这是Google Chrome和Safari中的一个错误。在Firefox中，它正常工作。我花了一些时间搞清楚如何解决它。

我的解决方案是，您需要将contenteditable包装到另一个包装器中。所以插入符号将在内心满足的最终结束。

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

我们需要内部和内部，以便我们可以专注于内部内容。

首先，检查浏览器是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';
    }

然后您需要做的就是，专注于满足并在文本末尾设置插入符号。

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

在这里，我编辑了您的示例http://jsfiddle.net/6XAfv/4/，但它无法正常运行，但您可以通过重点修复轻松完成工作。

希望这有帮助。

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

1 个答案: