🚀 用div模拟textarea的实现

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签："模拟textarea","div", Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

总结

主要是利用了 HTML5 提供的 contenteditable 属性，让普通的 div可以进行编辑。 结合 CSS 可以做到拉伸、滚动等效果。

🌟 完整代码：

        
        <!DOCTYPE html>
        <html>
        <head>
            <title>用一个div模拟textarea的实现</title>
        </head>
        <style>
        .edit{
            width: 300px;
            height: 200px;
            padding: 5px;
            border: solid 1px #ccc;
            resize: both; //右下角自由拉伸
            overflow:auto; //滚动
        }
        </style>

        <body>
            <h3>用一个div模拟textarea的实现</h3>
              <div class="edit" contenteditable="true">
                这里是可以编辑的内容，配合容器的overflow，多行截断，自定义滚动条。
            </div>
        </body>
        </html>
← 返回首页