textarea随输入内容自动改变行高

痛定思痛。 2023-06-10 03:27 89阅读 0赞

要求：在textArea中输入内容后，随着输入内容的行树的增加或减少，输入框的高度随之改变，让使用者可以看到输入的所有内容：

以下代码基于网上的查询，亲测，可以实现：

$(function () {
        var obj = document.getElementsByTagName("textarea");//获取页面中的所有textarea
        for(var i =0;i<obj.length;i++){
            //遍历textarea,对每个输入框的高度进行自适应调整
            makeExpandingArea(obj.item(i));
        }
    });
    /**
     * 设置输入框textarea的高度随输入内容多少而自动变更
     * @param el html元素
     */
    function makeExpandingArea(el) {
        var timer = null;
        //由于ie8有溢出堆栈问题，故调整了这里
        var setStyle = function(el, auto) {
            if (auto) el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
        }
        var delayedResize = function(el) {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            timer = setTimeout(function() {
                setStyle(el)
            }, 200);
        }
        if (el.addEventListener) {
            el.addEventListener('input', function() {
                setStyle(el, 1);
            }, false);
            setStyle(el)
        } else if (el.attachEvent) {
            el.attachEvent('onpropertychange', function() {
                setStyle(el)
            })
            setStyle(el)
        }
        if (window.VBArray && window.addEventListener) { //IE9
            el.attachEvent("onkeydown", function() {
                var key = window.event.keyCode;
                if (key == 8 || key == 46) delayedResize(el);
    
            });
            el.attachEvent("oncut", function() {
                delayedResize(el);
            }); //处理粘贴
        }
    }