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

Question

我有一个 contenteditable div，其中包含几个带有类 dontEdit 的跨度。有没有办法可以使跨度不可编辑，而 div 的其余部分保持可编辑。

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

请在此处查看小提琴：http: //jsfiddle.net/LZpag/

Answer 1

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

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