如何在 contenteditable div (Dart) 中设置和获取插入符号的位置？答案

【问题标题】：How to set and get the caret position in a contenteditable div (Dart)?如何在 contenteditable div (Dart) 中设置和获取插入符号的位置？
【发布时间】：2016-02-24 17:47:11
【问题描述】：

如何在内容可编辑的 div 中设置和获取插入符号的位置？

我对当 contenteditable div 位于 webcomponent 内部（带有 shadow dom）时也有效的方法感兴趣。

【问题讨论】：

标签： dart dart-polymer shadow-dom dart-html

【解决方案1】：

以下代码似乎有效。如果你不使用 shadow dom，你可以使用：
var root = window;

请注意，在当前的 Dartium 版本（2015 年 11 月）中，有一个错误会阻止 getCaretPosition 与 shadow dom 一起正常工作。在最新的 chrome 中编译成 javascript 后就可以使用了。

int getCaretPosition(Element element) {
  dynamic root = element.shadowRoot ?? window;
  return root.getSelection().getRangeAt(0).endOffset;
}

void setCaretPosition(Element element, int position) {
  final range = document.createRange()
    ..setStart(element, position)
    ..setEnd(element, position);

  dynamic root = element.shadowRoot ?? window;
  root.getSelection()
    ..removeAllRanges()
    ..addRange(range);
}

在Dartpad查看演示

【讨论】：