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

视觉CG

已于 2024-03-11 23:59:26 修改

阅读量906

点赞数 11

文章标签： html 前端 javascript

于 2024-03-11 23:53:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43614372/article/details/136638841

版权

本文介绍如何使用HTML和CSS创建一个可编辑的textarea，解决传统textarea仅支持文本输入的问题，允许用户插入图片和表情，适用于增强用户评论框功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

文本撑满时

初始化时

在这里插入图片描述

码

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>