如何在contenteditable元素（div）中设置插入符（光标）的位置？

Question

我以这个简单的HTML为例：

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

我想要简单的事情-
单击按钮时，我想将插入符号（光标）放入可编辑div中的特定位置。通过网络搜索，我将这个JS附加到了按钮单击上，但是它不起作用（FF，Chrome）：

var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

是否可以像这样手动设置插入符号的位置？

Answer 1

在大多数浏览器中，您需要Range和Selection对象。您可以将每个选择边界指定为一个节点，并在该节点内指定一个偏移量。例如，要将插入符号设置为文本第二行的第五个字符，请执行以下操作：

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

IE <9的工作原理完全不同。如果需要支持这些浏览器，则需要其他代码。