主要是使用css的伪类和属性来实现的,具体有两种方法:
方法一:
通过css
的属性来实现:
.editor:empty:before {
content: '请输入文字';
font-size: 14px;
color: #ccc;
}
.editor {
outline: none;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
<div contenteditable="true" class="editor"></div>
方法二:
通过css
获取标签属性值来实现:
.editor:empty:before {
content: attr(placeholder);
font-size: 14px;
color: #ccc;
}
.editor {
outline: none;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
<div contenteditable="true" class="editor" placeholder="请输入文字"></div>