Javascript 禁止在contenteditable td中编辑某些内容

我在一个表中有一个

td

，表中有

contenteditable=“true”

。在

td

中，我有一个

span

和一些内容。我想使

td

可编辑，除了这个

span

。我该怎么做

<td colspan="4" contenteditable="true">
  <span class='notForEdit'><i class="fa fa-cog"></i><span>
</td>

---

为什么不这样做：

<td colspan="4">
  <span contenteditable="true">
    editable test
  </span >
  <span contenteditable="false"><i class="fa fa-cog"></i><span>
  <span contenteditable="true">
    more editable test
  </span >
</td>

可编辑测试
更可编辑的测试

为什么不这样做：

<td colspan="4">
  <span contenteditable="true">
    editable test
  </span >
  <span contenteditable="false"><i class="fa fa-cog"></i><span>
  <span contenteditable="true">
    more editable test
  </span >
</td>

可编辑测试
更可编辑的测试

您可以尝试这样做

td{
保证金：0；
填充：0；
}
p{
浮动：左；
填充：0.1米；
}

这是一个段落，不可编辑。

纯文本


下一件事。

您可以尝试这样做

td{
保证金：0；
填充：0；
}
p{
浮动：左；
填充：0.1米；
}

这是一个段落，不可编辑。

纯文本


下一件事。

不能直接在HTML中使用。我相信你可以找到一些非常难看的解决方案，将字符串保留在

contenteditable

内容的开头，但这将是一场维护噩梦。将

contenteditable

从

td

中去掉，然后将

span

放在另一个

div

中保存

contenteditable

数据的方法要简单得多。在HTML中不可能直接使用。我相信你可以找到一些非常难看的解决方案，将字符串保留在

contenteditable

内容的开头，但这将是一场维护噩梦。将

contenteditable

从

td

中去掉，然后将

span

放在另一个

div

中保存

contenteditable

数据，这要简单得多。实际上不必定义

contenteditable=“false”

只要属性没有在父元素上使用。只要属性没有在父元素上使用，就不需要定义

contenteditable=“false”

。