Contenteditable 也可以删除和编辑字段中的图标

Question

我在我的表中使用 contenteditable，并且使用 Javascript 创建的每个 td 都设置为 contenteditable="true"。

问题是我想在显示“总计”的字段中添加一个图标，并允许用户更改数据，但使用 contenteditable 甚至允许他们编辑/删除图标！

我希望图标保留在那里而不是编辑或更改。有没有办法使用 JavaScript 或 CSS 修复可编辑 td 中的跨度或图标？

例子：

<table>
<thead>
  <tr>
    <th>TOTAL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td contenteditable="true"><span>$</span>887</td>
  </tr>
</tbody>

Answer 1

将 contenteditable 移动到另一个不包含图像的 span：

<table>
<thead>
  <tr>
    <th>TOTAL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>$<span contenteditable="true">887</span></td>
  </tr>
</tbody>