突出顯示/選擇多個div，範圍爲w/contenteditable？

假設我有一套contenteditable="true" div。突出顯示/選擇多個div，範圍爲w/contenteditable？

<div id="0" contenteditable="true"></div> 
<div id="1" contenteditable..></div> 
<div...etc></div>

我不能有一個div，多個div是必須的。我如何突出顯示多個div的內容？使用範圍？還要別的嗎？

來源

2011-01-24 JCOC611

@ JC0C611：根據W3C – 2011-01-24 01:45:33

，數字不是`id`的有效值這很奇怪，但讓我們說他們在哪裏「_0」，「_1」...等，這是有效的，對吧？ – JCOC611 2011-01-24 01:48:44

@ JC0C611：ID和名稱標記必須以字母（[A-Za-z]）開頭，後面可以跟隨任意數量的字母，數字（[0-9]），連字符（「 - 」），下劃線「_」），冒號（「：」）和句號（「。」）（http://www.w3.org/TR/html401/types.html#type-name） – 2011-01-24 01:51:27

答案是它取決於瀏覽器。有關使用範圍的兩種方法的測試，請參見this example。第一次嘗試創建一個範圍每編輯<div>並將其全部添加到選擇。第二次試圖創建一個範圍包含兩個可編輯的<div>的內容。

結果：

在所有的瀏覽器，這是不可能爲用戶創建選擇生活在一個以上的可編輯的元素;
Firefox是主流瀏覽器中最放縱的。這兩種程序化方法都有效。
Safari和Chrome是最不寬容的：兩種方法都不是從多個可編輯元素中選擇內容。
Opera 11不支持選擇多個範圍，但確實支持跨越多個可編輯元素的選定範圍。
IE版本9不支持DOM範圍或與其他瀏覽器的Selection API相同，但等效的TextRange代碼不允許從多個可編輯元素中進行選擇。

來源

2011-01-24 09:47:40

由於在其中一個選項中開始選擇，可以將div切換爲contenteditable="false"。像這樣的東西給你（使用JQuery）的想法：

$('div').bind("selectstart", function() { 
    $('div').attr("contenteditable", false); 
});

Here's a fiddle to demonstrate（僅適用於Chrome測試）。

請注意小提琴示例中第一個ContentEditable Div獲得焦點。這可以讓你像往常一樣輸入，但只要你選擇了任何東西，使用鼠標或鍵盤，你會看到你可以像往常一樣跨越divs擴展選擇。

這顯然需要充實以適應多個瀏覽器並適當地回到contenteditable="true"。但我認爲這種方法是有效的。

來源

2012-06-08 16:01:12 Holf

突出顯示/選擇多個div，範圍爲w/contenteditable？

回答

相關問題