css顯示無屬性不適用於Internet Explorer上contenteditable div

我必須插入一些跨度以將選擇保存/恢復到contentEditable div。不幸的是，這些跨度必須包含至少一個字符以允許「range.setStart（startNode，0）;」功能正常工作。所以，這是我的組元素：css顯示無屬性不適用於Internet Explorer上contenteditable div

<div contentEditable='true' id='THE_DIV'> 
    some text 
     <span id='START_SELECTION'>xxx</span> 
     selected text 
     <span id='END_SELECTION'>yyy</span> 
    other text 
</div>

現在應該有通過設置跨度顯示屬性沒有任何問題，但在消防福克斯正確地隱藏元素的Internet Explorer（7）似乎忽略它。

我注意到這個bheaviour與contentEditable屬性有關，但不幸的是我需要兩個（contentEditable父div和隱藏span兒童）。

你有什麼建議嗎？

預先感謝您，

弗拉維奧。

來源

2012-04-24 Mave751

無論如何，如果內部跨度不可見，則設置內部光標/光標會產生非常不好的效果或不會產生任何效果。因此，我想必須測試一個不同的解決方案來保存/恢復光標和選擇的位置，而contentEditable div的內部HTML更改。 – Mave751 2012-04-24 11:49:03

這是IE的故意行爲。有一個little-known command可以運行禁用它：

document.execCommand("RespectVisibilityInDesign", false, true);

看到這個演示：http://jsfiddle.net/DGWZF/1/

而且，你見過Rangy's selection save and restore module？它正是你想要做的。披露：我是Rangy的主要開發人員。

來源

2012-04-25 11:52:11

非常感謝Tim，我已經試過了你的Rangy插件（看過幾個以前的答案），它非常接近我正在尋找的東西。不幸的是，我注意到FF中的一個奇怪的行爲，同時通過箭頭鍵移動光標。當光標進入跨度到另一個跨度時，左箭頭不起作用。

我試圖更清晰：

<div contenteditable='true' id='THE_EDITOR'> 
    some text <span class='in_red'>other in red</span><span class='in_blue'>||or in blue</span> 
</div>

我用「||」代表光標。在這種情況下：|| 左箭頭無法移動光標FF（我不明白其中的道理），但正常工作，如果有兩個元素之間至少有一個字符：[space]||

如果你想嘗試如果您嘗試按順序輸入兩個或更多的「*」的再搬回使用左箭頭光標不移動

$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){ 

    var savedSel = rangy.saveSelection(); 

    //this blok is only to clean the HTML code every time 
    $(this).children(".star").each(function(){ 
     $(this).after($(this).html()); 
     $(this).remove(); 
    }); 

    //to wrap the spewial word "*" with a personal formatting span 
    var str = $(this).html(); 
     str = str.split("*").join("<span class='star'>*</span>"); 

    $(this).html(str); 

    rangy.restoreSelection(savedSel); 
    rangy.removeMarkers(savedSel); 
});

：重現這個「錯誤」的代碼（使用JQuery）。在它們之間放置空格或其他字符，它會再次移動。

來源

2012-04-26 07:55:58 Mave751

如果您檢查event.keyCode，並且在釋放箭頭鍵時不更改HTML代碼，它也可以在FF中工作。感謝您的支持。弗拉維奧。 – Mave751 2012-04-26 08:04:21

css顯示無屬性不適用於Internet Explorer上contenteditable div

回答

相關問題