javascript - 试图阻止 textarea 在 300px 之后增长，然后破坏自动增长的 textarea

Question

我正在尝试使用 autogrow.js 阻止文本区域在 300px 高度之后增长，然后销毁自动增长文本区域以使其具有滚动条，尽管我用来执行此操作的代码工作正常我可以阻止文本区域在之后增长300px 但是当发生这种情况时，文本区域突然变得小于 300px。

我需要它在 300 像素时停止增长但仍保持 300 像素的高度，这可能吗？

我正在重新创建 Facebook 消息框 - 文本区域可以增长，但在一定高度后它停止增长并且文本区域有滚动条，一旦你从文本区域删除文本，滚动条就会消失，然后文本区域可以再次增长。

我有一个有效的 jsfiddle 示例，其中包含我的问题。

http://jsfiddle.net/jphillips/k2a2pwc8/2/ 这也是代码

function scrollar() {
    elem = document.getElementById('box_area');
    if (elem.clientHeight < elem.scrollHeight) {
        alert('has scrollbars');
        var inpbh = $("#inner_postbox").height();
        var inpbh_val = $("#box_area_height").val(inpbh);
        $("#box_area").height(inpbh_val);
        //$("#box_area").autosize();
        if ($("#box_area").hasClass("detract")) {
            var inpbh = $("#inner_postbox").height();
            var inpbh_val = $("#box_area_height").val(inpbh);
            $("#box_area").height(inpbh_val);
        }

    } else {

        $("#box_area").autosize();
        $("#box_area").attr('class', 'expand');
    }
}

$("#box_area").autosize();

$("#box_area").keyup(function() {
    if ($("#box_area").height() > 300) {
        if ($("#box_area").hasClass("expand")) {
            $("#box_area").trigger('autosize.destroy');
            $("#box_area").attr('class', 'detract');
        }
    } else {
        $("#box_area").autogrow();
        $("#box_area").attr('class', 'expand');
    }
});

Answer 1

$("#box_area").addClass('expanded');

将这段代码添加到keyup函数中即可

$("#box_area").keyup(function() {
    if ($("#box_area").height() > 300) {
        if ($("#box_area").hasClass("expand")) {
            $("#box_area").trigger('autosize.destroy');
            $("#box_area").attr('class', 'detract');
            $("#box_area").addClass('expanded');
        }
    } else {
        $("#box_area").autogrow();
        $("#box_area").attr('class', 'expand');
    }
});

<style>
.expanded{height:300px; overflow-x:auto}
</style>