突出显示/选择多个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？

回答

相关问题