javascript - 使用最少 JS 的 contenteditable div 占位符

Question

我创建了一个带有 contenteditable 属性的 div 标记。我想把占位符放在这里，我找到了以下代码。

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  /* For Firefox */
}

<div class="test" contenteditable="true" placeholder="test"></div>

在基于 Chrome 的引擎中，看起来它正在工作。但我听说这里有一个错误，需要JavaScript。我找不到错误。你能告诉我问题是什么吗？

我也不确定 content:attr(); 是 css 中的网络标准。它是标准化的 CSS 属性吗？

Answer 1

在 .html 中

<div placeholder="Write your message.." contenteditable class="form-control edit-box holder"></div>

在 .css 中

.holder:before {
    content: attr(placeholder);
    color: lightgray;
    display: block;
    position:absolute;    
    font-family: "Campton", sans-serif;
}

这个解决方案对我有用。