textarea高度自适应

时间:2025-04-07 07:53:25

方法一、直接在textarea中添加oninput方法:

<textarea οninput=" = + 'px';"></textarea>

说明:

            在IE下可以根据输入的内容自适应高度,但是在谷歌浏览器下随着输入的字数越多,高度越高, 比实际的高度要高出很多;

方法二、自定义高度设置方法:

<script>
    /**
     * 文本框根据输入内容自适应高度
     * param  {HTMLElement} 输入框元素
     * param {Number}  设置光标与输入框保持的距离(默认0)
     * param {Number} 设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !! || 'mozInnerScreenX' in window,
                isOpera = !! && !!().indexOf('Opera'),
                addEvent = function(type, callback) {
                    ?
                            (type, callback, false) :
                            ('on' + type, callback);
                },
                getStyle = ? function(name) {
                    var val = [name];
                    if (name === 'height' && (/px/i) !== 1) {
                        var rect = ();
                        return - -
                                parseFloat(getStyle('paddingTop')) -
                                parseFloat(getStyle('paddingBottom')) + 'px';
                    };
                    return val;
                } : function(name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
        = 'none';
        var change = function() {
            var scrollTop, height,
                    padding = 0,
                    style = ;
            if (elem._length === ) return;
            elem._length = ;
            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = || ;
            = minHeight + 'px';
            if ( > minHeight) {
                if (maxHeight && > maxHeight) {
                    height = maxHeight - padding;
                    = 'auto';
                } else {
                    height = - padding;
                    = 'hidden';
                };
                = height + extra + 'px';
                scrollTop += parseInt() - ;
                = scrollTop;
                = scrollTop;
                = parseInt();
            };
        };
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };
</script>

说明:

          在IE和谷歌下均能自适应高度;但是动态给文本框赋值的时候,高度不能自适应,需要鼠标点击到文本框才能实现高度自适应的效果;

方法三:为了达到完美效果,要综合使用方法一和方法二;

使用实例:

1、样式:

.areaKFYYSM {
        margin-top: 5px;
        min-height: 35px !important;
        height: auto;
        width: 96% !important;
    }

2、文本框:

<textarea class="areaKFYYSM" οninput=" = + 'px';" ></textarea>

<input type=button value='初始化值' class="img-smallbtn btn-ok" οnclick="kfyysmChangeBFZ()" />

3、初始化方法设置文本框高度方法:

 $(function () {

      // 为每一个textarea绑定事件使其高度自适应
        $.each($("textarea"), function (i, n) {
            autoTextarea($(n)[0]);
        });

    });

4、文本框动态赋值后,调用input事件:

function kfyysmChangeBFZ() {

       // 给文本框初始值

       $("#areaKFYYSM").val("文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值文本框初始化值");

        //文本框高度自适应
        $("#areaKFYYSM").trigger("input");

}

参照网址:

/fxss5201/article/details/63267432