自适应高度的 textarea

最新推荐文章于 2025-09-10 10:09:14 发布

weixin_30251829

最新推荐文章于 2025-09-10 10:09:14 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/i0air/p/3595745.html

本文介绍了一种实现Textarea自适应高度的方法，通过监听input和propertychange事件调整元素的高度，适用于HTML5和IE9及以下浏览器。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自适应高度的textarea</title>
    <style>
        textarea { border: 1px solid gray; width: 100%; overflow: hidden; }
    </style>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('textarea').bind('input propertychange focus', function () {
                this.style.posHeight = this.scrollHeight;
            });
        });
    </script>
</head>
<body>
    <textarea>
        测试1
        测试2
    </textarea>
</body>
</html>