HTML5 内容可使用 jQuery 编辑答案

【问题标题】：HTML5 contentEditable with jQueryHTML5 内容可使用 jQuery 编辑
【发布时间】：2011-04-08 23:35:03
【问题描述】：

我有一些元素需要让里面的文本可编辑，为此我使用了 HTML 5 属性 contentEditable。我似乎无法使用多个选择器为此使用 jQuery。我想要做的是让容器 div 中的每个标签都是可编辑的。下面是一个例子，如果它与 jQuery 一起使用会是什么样子：

$("#container <all tags here>").contentEditable = "true";

我不知道如何让它选择所有标签，但你明白了。

所以所有 span、div、表格、粗体等都应该可以单独编辑

【问题讨论】：

【解决方案1】：

$('#container *').attr('contenteditable','true');

* 表示“所有元素类型”，类似于a,div,span,ul,etc...

与大多数其他 jQuery 函数一样，attr 将相同的操作应用于选择器捕获的每个元素。

【讨论】：

@DaveJarvis：属性是contenteditable，而不是contentEditable。如果这在某些版本的 IE 中不起作用，那是因为旧版 IE 的 setAttribute() 实现被破坏了，所以我建议改用 contentEditable 属性。对于几乎所有属性，这通常是一个好主意。所以，我推荐$('#container *').prop('contentEditable', 'true')
contenteditable 自动应用到它下面的所有元素，所以你真正需要的是 $('#container').attr('contenteditable','true');

【解决方案2】：

$("#container *").attr("contentEditable", true)

只是猜测。远离工作站。

【讨论】：

【解决方案3】：

我觉得你在两个地方误解了这个问题：

jQuery 创建“查询”对象，这些对象提供了操作 DOM 元素集的简写。您的示例代码在查询上设置 contentEditable，而不是它匹配的内容。您想要 jQuery 的“在所有匹配元素上设置属性”的简写，即 $('whatever').attr('contentEditable','true');
我不确定您是否正确理解 contentEditable。您应该将它设置在每个可编辑区域的顶级容器上，其效果适用于其中的所有内容。根据我的经验，如果在#container 或类似#container div.post 上设置 contentEditable 确实不够好，那么你就会遇到更大的问题。

【讨论】：

【解决方案4】：

出于某种原因，在 IE10 中只有这似乎有效：

$('#container').get(0).contentEditable = "true";

为什么 attr 不起作用我不知道。

【讨论】：

【解决方案5】：

如果我没记错的话，在父级上设置contentEditable 值也会导致其所有子级变为可编辑。

这样做：

$('#container').attr("contentEditable", "true");

应该可以。

【讨论】：