- 最近在写笔记大页面的时候，经常会有遇到需要点击进行输入内容，如输入笔记内容，输入笔记标题等等的问题，一开始的想法是在div里面套一个textarea可以比较方便的实现，但是后续发现每次遇到类似页面都需要套一层这样的关系似乎有点麻烦。
- 后来在文档中发现，div有一个contenteditable属性，将其设置为true可以使得这个div变为可输入的div，如下
<div id="head_click_box1_div5_span1" contenteditable='true'></div>
- 这样设置之后，div会变成一个可输入的框，但是又有新的问题的问题出现了，div无法设置placeholder属性，来在未进行输入时有提示文字，，即下图效果
- 此时就应该用上我们的伪元素进行解决这个问题了
- 我们可以在div身上依旧去设置一个placeholder属性，将提示文字写于其中，然后在div的伪元素的content中，去获取这个placeholder里的内容，将其显示出来，再配合js，使得当div里面的内容不为空时候，显示伪元素，即可实现原先textarea的placeholder的效果，部分代码片段如下
<div id="head_click_box1_div5_span1" contenteditable='true' placeholder='我要设置'></div>
//以下是css片段
#head_click_box1_div5_span1::before{
content: attr(placeholder);
pointer-events: none;
display: block;
//再对其color进行设置，即可打到placeholder的显示效果
}
