前端-jquery文本高度自适应-textarea

最新推荐文章于 2025-09-08 13:28:00 发布

原创最新推荐文章于 2025-09-08 13:28:00 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jquery #textarea #文本高度自适应

前端同时被 3 个专栏收录

15 篇文章

订阅专栏

基础

12 篇文章

订阅专栏

遇到的问题

11 篇文章

订阅专栏

博客探讨了textarea文本高度自适应的问题。介绍了两种实现高度自适应的方案，但在tab切换或hide、show操作后，重新输入时高度恢复存在问题。一种方案重新输入时高度不恢复，另一种开始输入后恢复。解决方案是在初始时给定一个高度，并给出了html和js方面的解决办法。

方案1：

$("#theId").height($("#theId")[0].scrollHeight);
    $("#theId").on("keyup keydown", function() {
        $(this).height(this.scrollHeight);
    })

这样做可以高度自适应，但是重新回来，输入的时候，高度不会恢复。

方案2：

//jQuery实现textarea高度根据内容自适应
$.fn.extend({
    txtaAutoHeight: function() {
        return this.each(function() {
            var $this = $(this);
            if (!$this.attr('initAttrH')) {
                $this.attr('initAttrH', $this.outerHeight());
            }
            setAutoHeight(this).on('input', function() {
                setAutoHeight(this);
            });
        });

        function setAutoHeight(elem) {
            var $obj = $(elem);
            return $obj.css({
                height: $obj.attr('initAttrH'),
                'overflow-y': 'hidden'
            }).height(elem.scrollHeight);
        }
    }
});

$('#theId').txtaAutoHeight()

这个也可以高度自适应，但是同样回来要重新输入的时候，高度不会恢复。但是开始输入后就恢复高度了。

只有在tab切换,或者hide,show的时候会出现这种情况，解决方案：初始给定一个高度。

html中

min-height: 2rem

js中

$('#txtInput').css("height", 30);
$('#txtInput2').css("height", 30);

解决。