Javascript 内容可编辑占位符问题

我接着问了一个关于如何为div[contenteditable]创建占位符的问题

我的代码如下所示：

不幸的是，问题在于，正如您所看到的，标准输入的占位符会一直保留到您开始键入为止，而contenteditable的占位符会在您单击内部后立即消失

如何修复此问题？

请检查此问题，仅限CSS:）

更新小提琴：

您只需添加以下CSS即可：

[contenteditable=true]：空：之前{
内容：attr（占位符）；
display:block；/*用于Firefox*/
}
/*仅用于演示的常规样式*/
div[contenteditable=true]{
边框：1px虚线#AAA；
宽度：290px；
填充物：5px；
}
前{
背景：#EEE；
填充物：5px；
宽度：290px；
}

对contentEditable元素的占位符支持，
不支持JavaScript！
演示：
您只需添加以下CSS即可：

[contenteditable=true]：空：在{
内容：attr（占位符）；
display:block；/*用于Firefox*/
}
笔记

可以添加与实际文本不同的样式，如不透明度、斜体等
如果您的html需要100%兼容，您可以在两个文件上用“数据占位符”替换“占位符”
Chrome会在某些情况下添加br/>的内部内容可编辑元素，从而打破：空复选框。可以用一点JavaScript来修复

Ariel Flesler

稍微更改html，然后使用以下css：使用

占位符

而不是

数据占位符

，即不使用数据属性

输入，div{
边框：1px黑色实心；
边缘顶部：20px；
}
[contenteditable=true]：空：在{
内容：attr（占位符）；
}

---

@infinity抱歉，我把你链接到错误的小提琴上了。请看新的。

$('div[data-placeholder]').on 'keydown input', ->
if (this.textContent)
  this.dataset.divPlaceholderContent = 'true'
else
  delete(this.dataset.divPlaceholderContent)