效果图
文本撑满时
初始化时
码
contenteditable="true"设为可编辑状态
<divcontenteditable="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表情，图片等等
