JQuery自动调整文本区域大小

我有一个自动调整文本区域大小的功能

function textarea_resize() {
    //  changes mouse cursor when highlighting loawer right of box
    $("textarea.autoresize").on('keyup', function(e) {
        var myPos = $(this).offset();
        myPos.bottom = $(this).offset().top + $(this).outerHeight();
        myPos.right = $(this).offset().left + $(this).outerWidth();
        
        if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
            $(this).css({ cursor: "nw-resize" });
        }
        else {
            $(this).css({ cursor: "" });
        }
    })
    //  the following simple make the textbox "Auto-Expand" as it is typed in
    .keyup(function(e) {
        //  this if statement checks to see if backspace or delete was pressed, if so, it resets the height of the box so it can be resized properly
        if (e.which == 8 || e.which == 46) {
            $(this).height(parseFloat($(this).css("min-height")) != 0 ? parseFloat($(this).css("min-height")) : parseFloat($(this).css("font-size")));
        }
        //  the following will help the text expand as typing takes place
        while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
            $(this).height($(this).height()+1);
        };
    });
}

函数textarea_resize（）{
//高亮显示方框右侧时更改鼠标光标
$（“textarea.autoresize”）.on（'keyup'，函数（e）{
var myPos=$（this.offset（）；
myPos.bottom=$（this.offset（）.top+$（this.outerHeight（）；
myPos.right=$（此）.offset（）.left+$（此）.outerWidth（）；
如果（myPos.bottom>e.pageY&&e.pageY>myPos.bottom-16&&myPos.right>e.pageX&&e.pageX>myPos.right-16）{
$（this.css（{cursor:“nw resize”}）；
}
否则{
$（this.css（{cursor:}）；
}
})
//下面的简单示例使文本框在键入时“自动展开”
.keyup（功能（e）{
//此if语句检查是否按了backspace或delete，如果是，则重置框的高度，以便可以正确调整其大小
如果（e.which==8 | | e.which==46）{
$（this.height）（parseFloat（$（this.css（“最小高度”））！=0？parseFloat（$（this.css（“最小高度”））：parseFloat（$（this.css（“字体大小”））；
}
//以下内容有助于文本在键入时展开
while（$（this.outerHeight（）

然后我在

$（document.ready

它工作得很好，但我遇到的一个问题是，当在文本区域中键入时，这也适用，如果页面有许多文本区域，则需要很长时间来应用大小调整，并将阻止页面响应

我认为“页面未响应”的问题在于循环。循环将在每个关键点笔划上执行。所以我决定用

IF

条件代替它

以下是更新的代码：

function textarea_resize() {
    //  changes mouse cursor when highlighting loawer right of box
    $("textarea.autoresize").on('keyup', function(e) {
        var myPos = $(this).offset();
        myPos.bottom = $(this).offset().top + $(this).outerHeight();
        myPos.right = $(this).offset().left + $(this).outerWidth();
        
        if (myPos.bottom > e.pageY && e.pageY > myPos.bottom - 16 && myPos.right > e.pageX && e.pageX > myPos.right - 16) {
            $(this).css({ cursor: "nw-resize" });
        }
        else {
            $(this).css({ cursor: "" });
        }
    })
    //  the following simple make the textbox "Auto-Expand" as it is typed in
    .keyup(function(e) {
        //  this if statement checks to see if backspace or delete was pressed, if so, it resets the height of the box so it can be resized properly
        if (e.which == 8 || e.which == 46) {
            $(this).height(parseFloat($(this).css("min-height")) != 0 ? parseFloat($(this).css("min-height")) : parseFloat($(this).css("font-size")));
        }
        //  the following will help the text expand as typing takes place
        var new_height = this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"));
        if( $(this).outerHeight() < new_height ) {
            $(this).height(new_height);
        }
    });
}

$(function(){
 textarea_resize();
});

函数textarea_resize（）{
//高亮显示方框右侧时更改鼠标光标
$（“textarea.autoresize”）.on（'keyup'，函数（e）{
var myPos=$（this.offset（）；
myPos.bottom=$（this.offset（）.top+$（this.outerHeight（）；
myPos.right=$（此）.offset（）.left+$（此）.outerWidth（）；
如果（myPos.bottom>e.pageY&&e.pageY>myPos.bottom-16&&myPos.right>e.pageX&&e.pageX>myPos.right-16）{
$（this.css（{cursor:“nw resize”}）；
}
否则{
$（this.css（{cursor:}）；
}
})
//下面的简单示例使文本框在键入时“自动展开”
.keyup（功能（e）{
//此if语句检查是否按了backspace或delete，如果是，则重置框的高度，以便可以正确调整其大小
如果（e.which==8 | | e.which==46）{
$（this.height）（parseFloat（$（this.css（“最小高度”））！=0？parseFloat（$（this.css（“最小高度”））：parseFloat（$（this.css（“字体大小”））；
}
//以下内容有助于文本在键入时展开
var new_height=this.scrollHeight+parseFloat（$（this.css）（“borderTopWidth”）+parseFloat（$（this.css）（“borderBottomWidth”）；
if（$（this）.outerHeight（）<新高度）{
$（此）.高度（新高度）；
}
});
}
$（函数（）{
textarea_resize（）；
});

它似乎起作用了，而我没有按逻辑去做。也许你可以调整/修改它以满足你的需要

---

Fiddle:

nice，似乎可以工作，尽管它不再在页面加载时调整大小了？我将此代码添加到解决上述问题的函数中^

$（'textarea.autoresize'）。trigger（'keyup'）很高兴知道您找到了解决方案！干杯：）