实现textarea自适应高度，并且在回显数据也会自适应数据高度。

本文链接：https://blog.youkuaiyun.com/weixin_40394560/article/details/105558254

介绍两种方法实现textarea自适应高度，包括在回显数据时也能自动调整高度。第一种方案依赖用户交互，第二种方案利用pre标签，但在实际项目中可能遇到兼容性问题。

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

可以直接粘贴代码查看效果。

第一种解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <td>
        <pre><span></span><br></pre>
        <textarea data type="required" id="grxygzjh" isheightauto="true" maxlength="1000" msg="必填项" name="grxygzjh"
            onfocus="autoTextarea(this)" placeholder="*请输入个人下月工作计划"> iu黄金时代佛教发我二
        士大夫看见的是分厘卡电视机
    啊十大科技反抗类毒素解放老师
塑料袋封口尽快发我看</textarea>
    </td>
</body>

</html>
<script>

    // textare自动换行
    /**
    * 文本框根据输入内容自适应高度
    * @param                {HTMLElement}        输入框元素
    * @param                {Number}                设置光标与输入框保持的距离(默认0)
    * @param                {Number}                设置最大高度(可选)
    */
    var autoTextarea = function (elem, extra, maxHeight) {
   
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
   
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
   
                var val = elem.currentStyle[name