JQuery 自动调整文本区域大小

Question

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

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);
        };
    });
}

然后我在$(document).ready下调用它

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

Answer 1

我认为“页面无响应”问题出在您的循环中。 您的循环在每次击键时执行。 所以我决定用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();
});

它似乎工作，我没有经历逻辑。 也许你可以调整/返工它以满足你的需要。

小提琴： https://jsfiddle.net/3qk7tjhv/