突出显示/选择多个具有可信范围的div？

Question

假设我有一组contenteditable="true" div。

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

我不能有一个div，多个div是必须的。我怎样才能突出显示多个div的内容？使用范围？还有什么吗？

Answer 1

答案是它取决于浏览器。有关使用范围的两种方法的测试，请参阅this example。第一次尝试为每个可编辑的<div>创建一个范围，并将所有这些添加到选择中。第二个尝试创建一个包含两个可编辑<div> s。

的内容的Range

结果：

• 在所有浏览器中，用户无法创建存在于多个可编辑元素中的选择;
• Firefox是主流浏览器中最宽松的。两种编程方法都有效。
• Safari和Chrome是最不宽容的：两种方法都不会从多个可编辑元素中选择内容。
• Opera 11在选择中不支持多个范围，但支持跨越多个可编辑元素的选定范围。
• IE 9之前的版本不支持DOM Range或与其他浏览器相同的Selection API，但等效的TextRange代码不允许从多个可编辑元素中进行选择。

Answer 2

由于在其中一个中开始选择，因此可以动态将div切换为contenteditable="false"。这样的东西给你的想法（使用JQuery）：

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

Here's a fiddle to demonstrate（仅在Chrome中测试过）。

请注意，在小提琴示例中，第一个ContentEditable Div获得焦点。这允许您像往常一样打开，但只要您选择任何东西，使用鼠标或键盘，您就会看到您可以像往常一样在div之间扩展选择。

这显然需要充实利用多个浏览器并适当地转回contenteditable="true"。但我认为这种方法是有效的。