使用 JS 在 contenteditable div 中设置光标在 Chrome 中工作正常，但如果 div 为空则不行

Question

我的意思示例：

<div id="editable" contenteditable="true">
    text text text text <span id="test" style="color:red"></span>text text
</div>
<button id="button" onclick="setCaret()">focus</button>
<script language="javascript">
function setCaret() {
    var el = document.getElementById("test");
    var range = document.createRange();
    var sel = window.getSelection();
    range.selectNodeContents(el);
    range.collapse(false);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}
</script>

打开 Chrome 中的 link 并单击 Focus，然后开始输入。你的新文字是红色的。

但是，如果您从 HTML 中删除 "ASDF" 并再次删除运行，您的新文本将是黑色的。

如何在 div 中没有起始文本的情况下将其设为红色？

（或者，同样有效，我怎样才能让它变成红色，然后从 div 清除起始文本而不丢失光标位置？）

Answer 1

我不确定这是不是你想要的，但我想是的，基本上是你的范围选择逻辑需要修改。我不删除文本，而是突出显示它，以便在用户键入时删除文本，我认为这可能是您想要的（la 'start typing here'）。

function setCaret() {
    var el = document.getElementById("test");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStartBefore(el);
    range.setEndAfter(el);
    sel.addRange(range);
    el.focus();
}

在此处检查分叉版本： http://jsfiddle.net/uhe76wup/

了解 Range 的好参考： https://developer.mozilla.org/en-US/docs/Web/API/Range

Answer 2

这是一个常见问题。以下是一些背景和可能的解决方案（none 是理想的）：

js contenteditable - prevent from writing into newly inserted element
How to place caret inside an empty DOM Element Node
How to select a node in a range with webkit browsers?
Set cursor after span element inside contenteditable div

使用 JS 在 contenteditable div 中设置光标在 Chrome 中工作正常，但如果 div 为空则不行

Using JS to set cursor in a contenteditable div works fine in Chrome, but not if the div is empty

javascript

dom

range