为contenteditable增加placeholder

加了contenteditable的div默认是没有placeholder的，下面尝试用css实现一个placeholder的效果：

1
<div class="richTextBox empty" contenteditable placeholder="请输入"></div>
1
2
3
4
5
6
7
8
9
10
.richTextBox {
    border: 1px solid #eee;
    height: 100px;
}
.richTextBox.empty:before {
    position: absolute; /*强制使伪元素脱离文档流，否则ff下输入的文字会跟在placeholder后面*/
    content: attr(placeholder); /*注意这里不能用引号*/
    color: #ddd;
    cursor: text;
}

效果图：
效果图