将插入符号设置为动态添加的HTML中的特定点

Question

我有一个满足的div

<div contenteditable="true" class="editable"></div>

我使用以下命令附加一些html：

$('.editable').html('<p><br></p>');

如何在<br>之前设置插入符？

Answer 1

在内容可编辑中设置光标位置是一项棘手的工作。
光标的处理取决于浏览器。 有范围和选择api在不同的浏览器上非常不一致。

这是如何使用游标：

按document.createRange()创建范围对象
通过范围方法选择指定的位置（参见api）
通过selection=window.getSelection()获取选择对象 按selection.removeAllRanges();清除所有现有选择 通过selection.addRange(range);

将范围添加到选区中

在这种情况下，段落元素中没有文本内容，因此您无法将光标置于其中。您可以按range.selectNode选择节点，也可以将光标放在元素之前/之后。 在之前或之后放置光标也会在不同的浏览器中表现奇怪，特别是在边缘情况下（例如在空div或第一个或最后一个位置）。

您必须明确指定要在UI中实现的目标。然后我可以提出一些逻辑来实现这一点。