【HTML】div设为输入框，巧妙添加placeholder效果

效果图

文本撑满时

初始化时

---

---

---

码

• contenteditable="true" 设为可编辑状态

  <div
    contenteditable="true"
    placeholder="评个小论吧！"
    class="textarea"
  ></div>
 <style>
 /* 设置最小高度，超过滚动显示 */
 .textarea {
  min-height: 36px;
  max-height: 120px;
  overflow-y: scroll;
  outline: none;
  background: rgba(111, 111, 111, 0.1);
  scrollbar-width: none;/*pc滚动条设为none,滚动条太丑了 */
  -ms-overflow-style: none;
}

/*placeholder颜色 */
.textarea:empty:before {
  content: attr(placeholder);
  color: #999;
}

/*文本框不为空时， placeholder设置为none*/
.textarea:focus:placeholder-shown {
  content: none;
}
</style>

---

---

用作领域

• 用户评论框，textarea无法满足我们正常需求，只能输文本，不能插入图片。
• 这种时候就可以用此类方法创建文本编辑框，还可以插入emjon表情，图片等等