Chrome中的Range.setStartAfter（）無法正確使用跨度或內聯元素

我有一個內容可編輯div。我有一些文字，看起來像這樣：Chrome中的Range.setStartAfter（）無法正確使用跨度或內聯元素

adsadsd <span>asdsa </span> moretextasdasd

我想使用Range.setStartAfter（）來插入符設置爲一個跨度標籤的右側。這在IE和Firefox中正常工作，但不在Chrome中。在Chrome中，插入符號位於span標記的末尾，而不是之後。
setStartBefore（）適用於所有瀏覽器。

它適用於Chrome，如果它是DIV元素，但不是span元素。

的jsfiddle：https://jsfiddle.net/vXnCM/5234/

注意如果單擊焦點然後開始打字，你會跨度內，而不是外界的它，你會在IE和Firefox。

有沒有人有解釋或解決鉻？

更新：它出現內聯元素在此爲鉻中斷。使用div，但設置顯示：行內塊使相同的行爲發生

來源

2016-02-13 Kyle

順便說一句，未來的任何人，我提交了一個關於這個鉻的錯誤，他們驗證。到目前爲止（一年之後）還沒有確定。 https://bugs.chromium.org/p/chromium/issues/detail?id=586964#c3 – Kyle

是的，這是不一致的鉻。

我已經解決了它在末尾添加一個虛擬後綴節點（空間），然後在插入的後綴節點上調用setStartAfter。可能有更好的方法，但這似乎現在起作用。

var sel = window.getSelection(); 
    var range = document.createRange(); 
    var suffixNode; 

    range.setEndAfter(specialTagContainer); 
    range.collapse(false); 

    range.insertNode((suffixNode = document.createTextNode(' '))); 

    range.setStartAfter(suffixNode); 

    sel.removeAllRanges(); 
    sel.addRange(range);

如果添加的空間是不是你想要的行爲，那麼你可以創建一個空的TextNode。

來源

2016-05-13 07:29:28

只是把$('#two')[0].contentEditable = false;在你的代碼的第一行，它的工作原理！ ;）

設置插入位置後，可以再次將contentEditable設置爲true。

來源

2017-03-03 02:33:19

Chrome中的Range.setStartAfter（）無法正確使用跨度或內聯元素

回答

相關問題