Question

我有以下html：

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

现在我想在Some文本之后设置光标（完全在#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 = "";

FIDDLE

Javascript / Jquery：如何在id里面设置焦点contenteditable

1 个答案: