如何使用HTML和JQuery根据内容自动调整textarea高度

刚好做过类似的需求，给你整理了两种靠谱的实现方案，结合你现有的代码就能直接用：

这个方案利用jQuery的事件监听和DOM操作，快速实现自动适配：

在你的lib/script.js文件中添加以下代码：

$(document).ready(function() {
    // 定义自动调整高度的函数
    function autoResizeTextarea($textarea) {
        // 先重置高度为auto，确保内容减少时能收缩
        $textarea.height('auto');
        // 把高度设置为内容实际占据的scrollHeight（包含内边距）
        $textarea.height($textarea[0].scrollHeight);
    }

    // 获取目标textarea元素
    const $targetTextarea = $('#textarea-container');
    // 页面加载完成后，先适配初始内容高度
    autoResizeTextarea($targetTextarea);
    // 监听输入、粘贴、删除等所有内容变化事件
    $targetTextarea.on('input', function() {
        autoResizeTextarea($(this));
    });
});

小提示 #

如果你的textarea设置了上下内边距（padding-top/padding-bottom），发现高度有偏差的话，可以调整高度计算方式：

$textarea.height(
    $textarea[0].scrollHeight 
    - parseInt($textarea.css('padding-top')) 
    - parseInt($textarea.css('padding-bottom'))
);

如果不想依赖jQuery，用原生JS也能轻松实现，代码更轻量化：

同样在lib/script.js中添加：

document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('textarea-container');

    function autoResizeTextarea(element) {
        element.style.height = 'auto';
        element.style.height = `${element.scrollHeight}px`;
    }

    // 初始化适配初始内容
    autoResizeTextarea(textarea);
    // 监听内容变化事件
    textarea.addEventListener('input', function() {
        autoResizeTextarea(this);
    });
});

为了让体验更好，建议给textarea加一点样式，避免用户手动拖动和出现滚动条：
在lib/style.css中添加：

#textarea-container {
    resize: none; /* 禁止手动调整大小 */
    overflow: hidden; /* 隐藏滚动条 */
    padding: 8px; /* 可选：添加内边距提升可读性 */
    border: 1px solid #ddd; /* 可选：添加边框 */
    min-height: 40px; /* 可选：设置最小高度，避免内容过少时太矮 */
}

这样你的textarea就能完美随着输入内容自动调整高度啦！

内容的提问来源于stack exchange，提问作者user5443928