HTML5 contentEditable with jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3655156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 contentEditable with jQuery
提问by David
I have some elements that need to have the text inside editable, for this I am using the HTML 5 attribute contentEditable. I can't seem to do use jQuery for this using multiple selectors. What I want to do is have every tag inside a container div be editable. Here's an example of what it would look like if it worked with jQuery:
我有一些元素需要将文本置于可编辑状态，为此我使用了 HTML 5 属性 contentEditable。我似乎无法使用多个选择器来使用 jQuery。我想要做的是让容器 div 中的每个标签都是可编辑的。下面是一个例子，如果它与 jQuery 一起工作，它会是什么样子：
$("#container <all tags here>").contentEditable = "true";
I dont know how to make it select all tags but you get the point.
我不知道如何让它选择所有标签，但你明白了。
So all span, div, tables, bold, etc should be editable individually
所以所有的跨度、div、表格、粗体等都应该可以单独编辑
回答by Rex M
$('#container *').attr('contenteditable','true');
*means "all element types", and is analogous to a,div,span,ul,etc...
*表示“所有元素类型”，类似于 a,div,span,ul,etc...
Like most other jQuery functions, attrapplies the same operation to every element captured by the selector.
与大多数其他 jQuery 函数一样，attr对选择器捕获的每个元素应用相同的操作。
回答by mkoistinen
$("#container *").attr("contentEditable", true)
Just a guess. Away from workstation.
只是一个猜测。远离工作站。
回答by ssokolow
I get the impression you're misunderstanding the problem in two places:
我的印象是你在两个地方误解了这个问题：
jQuery creates "query" objects which provide a shorthand for manipulating sets of DOM elements. Your example code sets contentEditable on the query, not what it matches. You want jQuery's shorthand for "set an attribute on all matching elements", which is
$('whatever').attr('contentEditable','true');I'm not sure you understand contentEditable properly. You're supposed to set it on the top-level container for each editable region and its effects apply to everything within. In my experience, if setting contentEditable on
#containeror something like#container div.postreally isn't good enough, then you've got bigger problems.
jQuery 创建“查询”对象，这些对象为操作 DOM 元素集提供了简写。您的示例代码在查询上设置 contentEditable，而不是它匹配的内容。您需要 jQuery 的“在所有匹配元素上设置属性”的简写，即
$('whatever').attr('contentEditable','true');我不确定您是否正确理解 contentEditable。您应该将其设置在每个可编辑区域的顶级容器上，并且其效果适用于其中的所有内容。根据我的经验，如果设置 contentEditable
#container或类似的东西#container div.post真的不够好，那么你就会遇到更大的问题。
回答by Matthew Lock
For some reason in IE10 only this seemed to work:
出于某种原因，在 IE10 中只有这似乎有效：
$('#container').get(0).contentEditable = "true";
Why attr didn't work I do not know.
为什么 attr 不起作用我不知道。
回答by Yi Jiang
If I can remember correctly, setting the contentEditablevalue on the parent would also cause all its children to become editable.
如果我没记错的话，contentEditable在父级上设置值也会导致其所有子级变得可编辑。
So doing this:
所以这样做：
$('#container').attr("contentEditable", "true");
Should work.
应该管用。
