Javascript：獲取內容中的文本可編輯到插入符號

Question

我很驚訝我遇到了這個問題並且無法找到答案。 我正在嘗試從 contenteditable 的開頭到用戶光標/插入符號獲取 contenteditable 中的文本。

這是我嘗試過的 jsFiddle （單擊 contenteditable 並觀看 console.log）。

我得到插入符號的位置，然后我嘗試獲取內容：

我嘗試使用 contenteditable 的textContent ，但如果有像foo\r\nbar foo<br>bar這樣的內容，它會在理想情況下輸出foobar內容可編輯）。

innerText按預期工作，輸出foo\r\nbar ，但正如在jsFiddle中看到的那樣，一旦 contenteditable 中的 html 變得有點復雜，插入符號 position 似乎與innerText中的位置不匹配，並且我無法輸出到插入符號.

使用 Range 接口找到了一些代碼，並對其進行了修改以滿足我在這個 jsFiddle中的需求，但是<br>與textContent有同樣的問題。

注意：當我獲得內容時，用戶將繼續輸入，因此尋找不會破壞此流程的內容。

只是在尋找方向，關於我應該嘗試什么的任何快速提示？

Answer 1

在您的小提琴中，我將 JavaScript 內容替換為：

document.querySelector("#edit").addEventListener("click", function(){
  var target = document.querySelector('#edit');
  var sel = document.getSelection();
  if(!sel.toString()) {
    var range = document.getSelection().getRangeAt(0);
    var container = range.startContainer;
    var offset = range.startOffset;
    range.setStart(target, 0);
    //do your stuff with sel.toString()
    console.log(sel.toString());
    //restore the range
    range.setStart(container, offset);
  }
});

希望這可以幫助。

編輯：既然你說

注意：當我獲得內容時，用戶將繼續輸入，因此尋找不會破壞此流程的內容。

我以為click事件只是一個例子； 在用戶鍵入時獲取文本意味着：

1. 入口點不能是click事件，但可能是setInterval function
2. 用戶輸入時沒有選擇，只有插入符號

解決報告的錯誤就足以像我一樣更改代碼，無論如何這只是獲得您感興趣的結果的示例； 比您必須努力實現真實場景的所有可能情況所需的行為。