『解疑』div高度可伸缩且可编辑（类似textarea）

div实现textarea效果

最新推荐文章于 2023-03-20 11:03:51 发布

原创最新推荐文章于 2023-03-20 11:03:51 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了一种使用div元素实现类似textarea可伸缩编辑功能的方法。通过设置div的样式，如高度、宽度、边框和溢出属性，再结合contenteditable属性，使div具备了可编辑和调整高度的功能。

问题

产品需求：为指定div新增类似textarea的可伸缩且可编辑功能。

原div (如下图所示)：

解决

新增可伸缩且可编辑功能后 (如下图所示)：
具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>div实现textarea效果</title>
    <style>
      #textarea {
        height: 200px;
        width: 300px;
        padding: 4px;
        border: 1px solid #888;
        resize: vertical;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id="textarea" contenteditable="true" placeholder="请输入内容..."></div>
  </body>
</html>