Question

我正在尝试将插入符号发送到contenteditable的末尾，这很好用，但是如果我在空白处插入一个空白<span></span>的末尾，则不会将其插入末尾。 / p>

<div contenteditable>
    <span>Start</span>
    <span></span>
</div>

插入号放在开始位置，但不在新行上。
这是我用来将插入符号放在最后的代码：

PlaceCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

其中el是可编辑的div。

感谢您的帮助。

Answer 1

您在代码段中存在一些语法错误。我修复了它们，然后运行它，然后它起作用了。插入符号结束了。

但是，我不确定您的意思（如果要在新行或第一行的末尾插入符号）。
为了使插入符号位于新行的末尾，您需要有效地“创建”新行。 span是内联元素。如果没有一些CSS规则，span将不会开始新的一行。 div将。另外，它还需要一些内容才能生效。

placeCaretAtEnd(document.querySelector("div[contenteditable]"));

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

<div contenteditable>
    <span>Start</span>
    <span style="display: block;">New Line</span>
</div>

contenteditable是布尔值属性。您可以省略="true"部分，而只需放置属性。参见this。

修改：
如果您要换行时没有任何文本，请使用<br>（两次-因为span在它之前。如果是<div>Start</div>，则只能使用1）

placeCaretAtEnd(document.querySelector("div[contenteditable]"));

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

<div contenteditable>
    <span>Start</span>
    <br><br>
    <span></span>
</div>

将插入符放置在ContentEditable Div的末尾不起作用

1 个答案: