使用div模拟textarea文本域实现高度自适应

最新推荐文章于 2025-07-23 08:30:00 发布

原创最新推荐文章于 2025-07-23 08:30:00 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

J-S 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何通过使用一个可编辑的DIV元素来模拟TEXTAREA的高度自适应效果。通过设置contenteditable属性并结合简单的CSS样式，可以创建一个能够根据输入内容自动调整高度的文本域。此外，还提供了一个示例代码，展示了如何使用jQuery获取DIV中输入的内容。

使用div模拟textarea文本域实现高度自适应

textarea本身没有自适用的技能，文字过多就会出现滚动条的，所以我们要转变思维曲线救国。

使用很简单，一个普通的block元素上加个contenteditable=”true”就可以了

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hh { min-height: 20px;width: 200px; _height: 200px;border: 1px solid pink }
    </style>
</head>
<body>
<div contenteditable="true" class="hh"></div>
<a href="" id="kk">点击</a>
</body>
<script src="js/jquery-2.0.3.min.js"></script>
</html>
<script>
    $(function(){
        $('#kk').on('click',function(){
            alert($('.hh').text())//获取div中的内容
        })
    })
</script>