清空contenteditable div中的内容

Question

我有一个可编辑的div，它像textarea一样工作：

<div class="post" placeholder="Write a comment..." contenteditable="true"></div>

如何通过JS/JQuery清空div中的所有值？

我尝试过$(".post").html("");，但它不能正常工作。

请帮忙解决。

- Bagwell

---

你忘记了一个双引号!! 如果那行不起作用，尝试使用empty()函数。 - Basil Basaif

Answer 1

$(".post").empty();

演示

jQuery empty

- nzn

---

我也尝试过这个，但每当它将其设置为空时，然后我去在div中输入其他内容，它会将类型闪烁的图标放在div的最右边，不让我输入任何东西：http://i.imgur.com/ZHnUPrt.png - Bagwell

如果您在演示中查看，一切都正常的话，那么您的问题可能出现在其他地方。也许您可以创建一个带有您的问题的jsfiddle？ - nzn

我发现问题是由于占位符引起的。我有以下CSS，使占位符表现得像文本区域：.post[placeholder]:empty:before { content: attr(placeholder); color: #bababa; }。现在我必须想办法让占位符再次工作。 - Bagwell

Answer 2

在纯JavaScript中，一个简单的elm.innerHTML='';应该可以很好地工作：

<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
  document.getElementsByClassName('post')[0].innerHTML='';
">clear</button>

请注意，div元素没有“placeholder”属性，您需要替换为一个简单的函数来实现该功能，只需包含一行代码即可：

for( var elms=document.getElementsByClassName('post'), L=elms.length
   ; L--
   ; elms[L].innerHTML=elms[L].getAttribute('placeholder')
   );

这是上述内容的 jsfiddle工作示例。

希望能有所帮助！

编辑： 并非所有浏览器都会出现闪烁的类型光标！相反，它们通常只清除div，由于高度缩回到0像素，你将无法掌握任何东西，因此要解决这个问题，自然需要选择并重置占位符文本。

<div class="post" placeholder="Write a comment..." contenteditable="true">
</div>
<button onclick="
  var elm = document.getElementsByClassName('post')[0];
  elm.innerHTML=elm.getAttribute('placeholder');
">clear</button>

在这里工作jsfiddle 链接。

- GitaarLAB

---

这给了我与其他答案相同的问题，当它清除div时，它将重置闪烁类型图标到div的右侧：http://i.imgur.com/ivu6ssC.png - Bagwell