contenteditable - 使 contenteditable div 中的 span 不可编辑

Question

我有一个 contenteditable div，它包含几个 dontEdit 类的 span。有没有一种方法可以使 span 不可编辑，而 div 的其余部分保持可编辑。

<div contenteditable=true>
    editable1 <span class="dontEdit">uneditable1</span> editable2
</div>

请看这里的 fiddle :http://jsfiddle.net/LZpag/

Answer 1

添加contenteditable="false"每个 <span>元素。如果需要动态执行，可以使用 contentEditable JavaScript 中的属性。请注意，以下内容在 IE <= 8 中不起作用，因为这些浏览器不支持 document.getElementsByClassName() , 但如有必要，这很容易解决:

var spans = document.getElementsByClassName("dontEdit");
for (var i = 0, len = spans.length; i < len; ++i) {
    spans[i].contentEditable = "false";
}