如何取消 contentEditable 的激活状态

Question

我有一个包含标签的网页。每次用户点击标签时，它都会生成一个标签，其中contentEditable属性设置为true。

我的问题是，如果用户通过点击标签来添加标签，然后再点击标签（即激活可编辑区域），然后再点击回标签，它将添加另一个可编辑的标签（期望效果），但它也会保留第一个标签处于编辑模式。

如何将可编辑的标签更改为普通标签？

- Alain

Answer 1

你可以使用jQuery去除 contenteditable 属性并取消焦点，如下所示：

$('span#id').removeAttr('contenteditable').blur();

如果您想样式化所有可编辑的span元素，可以在CSS中这样做：

span[contenteditable] { } /* editable */

- js-coder

---

哎呀，不是这样的。删除属性会防止再次编辑（这并不是期望的效果，但我可以通过其他方式添加回去，所以如果这是唯一的问题，我不介意），但它会保留文本选择（但无法像上面所述那样进行编辑），这是不希望的。 - Alain

那么你应该更准确地提出问题。你问的是：“如何取消contentEditable” / “如何将可编辑的span改回普通的span？”这正是我回答的内容。 - js-coder

真的，我所说的正常跨度是指未被编辑的跨度。正如我上面所述，您的解决方案让我们达到了50%的效果，因为该跨度仍然看起来像正在被编辑，只是我们无法修改其内容。 - Alain

我在我的回答中添加了一点内容。这是否回答了所有问题？ - js-coder

我改变了我的方法，使用文本区域而不是可编辑内容（因为它还有其他问题），但我会记住这一点。谢谢。 - Alain

为了以后的参考，您可以使用.attr("contenteditable", true);来添加回contenteditable。 - Twisty