我想添加一个带有占位符的输入行为到 contenteditable 字段。
没问题，使用以下 CSS 即可完成
<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-placeholder);
color:grey;
}
这是针对每个具有属性 contenteditable 的元素那是 true也没有 child ，也没有重点插入与 data-placholder 中的文本相同的文本.
JsFiddle可用。在 FF、Chrome 和 IE 11 上运行良好，但在 Safari(从 5 到 7)中我看到以下错误。当我点击时:
- 点击可编辑
- 写点东西
- 点击离开(它工作正常)
- 然后回到contenteditable
- 删除所有文本
- 点击离开
比我的 contenteditable 是空的。 (在所有其他浏览器中，它里面有 Title)。请注意，如果您只是点击可编辑和点击点击，它的行为是正确的。
不知道为什么会这样，也不知道如何解决。
最佳答案
这是一个已知问题，元素未注册为空。您可以通过简单的 jquery 函数调用来清空元素来修复它:
$input.empty();
参见 this answer以获得详细的解释。
这是你的工作 jsfiddle .
关于html - contenteditable 不显示伪选择器 :before in safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24250455/