contenteditable 不显示伪选择器：在 safari 之前

Question

我想将占位符的输入行为添加到内容可编辑字段。

没问题，用下面的 CSS 完成

<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-placeholder);
  color:grey;
}

对于每个具有contenteditable 属性的元素，即true，并且没有子元素且没有焦点，插入与data-placholder 中的文本相同的文本。

JsFiddle 可用。在 FF、Chrome 和 IE 11 上运行良好，但在 Safari（从 5 到 7）中，我看到了以下错误。当我点击时：

• 点击可编辑
• 写点东西
• 点击离开（正常工作）
• 然后回到 contenteditable
• 删除所有文字
• 点击离开

我的 contenteditable 是空的。 （在所有其他浏览器中，它内部都有Title）。请注意，如果您只是单击可编辑和单击离开，它的行为是正确的。

不知道为什么会这样，也不知道如何解决。

Answer 1

这是一个元素未注册为空的已知问题。您可以通过简单的 jquery 函数调用来清空元素来修复它：

$input.empty();

详情请见this answer。

这里是你的工作jsfiddle。