javascript - Javascript/Jquery：如何在 contenteditable 内的 id 上设置焦点

Question

我有以下html：

<div id="content" contenteditable="true" style="font-family: Helvetica;">
    Some text
    <div id="cursor" contenteditable="true"></div>
    Some other text.
</div>

现在我想在一些文本之后设置光标（正好在 中#cursor）。我尝试了两种方式：

$('#cursor').focus();
document.getElementById('#cursor').focus();

但它没有用。有没有办法做到这一点？

Answer 1

#content是外部可编辑元素，因此您需要关注它，并将插入符号移到内部#cursor，但由于#cursor没有内容，因此没有任何目标可供选择。一种解决方案是向目标添加一些内容，例如 textNode，移动插入符号，然后删除内容，如下所示：

var el    = document.getElementById("content"),
    el2   = document.getElementById("cursor"),
    range = document.createRange(),
    sel   = window.getSelection();

el2.innerHTML="temp";
var t = el2.childNodes[0];

range.setStartBefore(t);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
el2.innerHTML = "";

小提琴