javascript - ContentEditable 占位符问题

Question

我关注了关于如何为 div[contenteditable] 创建占位符的 SO 问题。

我的代码如下:http://jsfiddle.net/sdxjgkzm/

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

不幸的是，问题在于，正如您所见，标准输入的占位符会一直保留到您开始输入为止，而一旦您在其中单击，contenteditable 的占位符就会消失。

我该如何解决这个问题？

Answer 1

稍微更改您的 html，然后使用下面的 css:使用 placeholder 而不是 data-placeholder，即没有数据属性。

input,div {
    border: 1px black solid;
    margin-top: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
}

<input placeholder="test"/>
<div contenteditable='true' placeholder="test"></div>