如何在滿足感的div（Dart）中設置和獲取插入符號的位置？

Question

如何在contenteditable div中設置並獲取插入符的位置？

我感興趣的一種方法，當contenteditable div在webcomponent（帶影子dom）時也可以工作。

Answer 1

下面的代碼似乎工作。如果使用沒有影子DOM，你可以只使用：

注意與當前Dartium版本（2015年11月），有其防止getCaretPosition與影子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