將插入符號的值設置到某個位置後不能得到插入符號位置值

Question

在我的項目中，我使用的是「contenteditable」div。我正在嘗試使用此div來創建自動完成功能。無論何時我輸入任何單詞，都應在不同的div中看到一些建議。當我按ENTER時，所選建議應替換爲「contenteditable」div中輸入的文字。然後當我按SPACE時，應該可以看到更多的建議。

有關更清晰的解釋，請參閱此fiddle。

在小提琴中，鍵入一些字母，然後按ENTER，然後SPACE。

每當我按SPACE，都會顯示一個警告框（用於測試）。這告訴插入符號在「contenteditable」div的當前位置。

但是，當我按ENTER，然後SPACE，脫字符的當前位置是錯誤的，即0。

據我所知，如果我不使用placeCaretAtEnd()函數，那麼我正確地得到插入位置。但在我的情況下，我想同時使用（getCaretPosition()和placeCaretAtEnd()）。

我正在使用Firefox進行檢查。 （在Chrome中，它似乎工作正常）

我需要一個適用於IE8 +，Chrome和Firefox的解決方案。請幫忙。

Answer 1

您需要一種更復雜的方式來獲取與可編輯div中的所有文本配合使用的插入位置。您可以使用this question中的代碼，但我不太確定您想要實現的目標。您可能會遇到問題，因爲代碼沒有考慮到<br>暗示的lin中斷和塊元素。

演示：http://jsfiddle.net/BN5N6/12/

Answer 2

對不起，我不能給你一個完整的答案。我只會將此作爲評論發佈，但我沒有評論權限。在玩過你的小提琴之後，我注意到在按下Enter後，在Firefox（僅限我測試過的瀏覽器）中，「結果」div會有一個額外的子文本節點。這不是你的placeCaretAtEnd函數的結果。這似乎是Firefox在您輸入時爲您做的事情。

它看起來像在控制檯中得到的0是插入符在瀏覽器爲您創建的新文本節點中的位置。如果在按下輸入鍵後，您單擊原始文本節點並按空格鍵，控制檯將爲您提供正確的插入位置（再次，相對於光標所在的文本節點）。