HTML页面加载完后，根据内容调整<textarea>元素的高度

最新推荐文章于 2025-06-16 18:41:56 发布

原创最新推荐文章于 2025-06-16 18:41:56 发布 · 7.7k 阅读

0 ·

CC 4.0 BY-SA版权

脚本语言专栏收录该内容

19 篇文章

订阅专栏

该博客讨论了如何在HTML页面加载完成后，依据textarea的内容动态调整其高度。提到了可以使用$(document).ready(function () {} )或者window.onload来实现这一功能。

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

假如我的HTML中有一个textarea元素，我想在它加载完成后根据内容调整其高度。怎么做呢？

1. 我定义的textarea元素如下

<textarea class="form-control" type="text" name="value" id="value"
          placeholder="输入参数值"></textarea>

注意： id = 'value'

这里的关键问题是html加载完后会调用哪个函数，有以下两种方法：

2.1 方法一：通过调用$(document).ready(function () {} )

<script type="text/javascript">
    function get_text_rows(text) {
        return text.split("\n").length;
    }
    
    $(document).ready(function () {
        document.getElementById('value').rows = get_text_rows($('#value').val());
    });
</script>

2.2 方法二：通过调用window.onload

<script type="text/javascript">
    function get_text_rows(text) {
        return text.split("\n").length;
    }
    
    window.onload = function() {
        document.getElementById('value').rows = get_text_rows($('#value').val());
    }
</script>

function get_text_rows(text) {
    return text.split("\n").length;
}

function get_text_rows_autosize(text) {
    var row = 5;
    var lineArrs = text.split("\n");
    var resizeNumber = is_ie ? 1 : 0;
    resizeNumber += lineArrs.length;

    var colsSize = 40;
    for(var i=0; i<lineArrs.length; i++) {
        if(lineArrs[i].length >= colsSize){
            resizeNumber += Math.ceil(lineArrs[i].length/colsSize)
        }
    }
    resizeNumber = Math.max(resizeNumber, row);

    return resizeNumber;
}