Javascript 试图阻止textarea在300px之后增长，然后销毁自动增长textarea

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

我需要它停止以300px的速度生长，但仍然保持300px的高度，这可能吗

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

我有一个正在运行的JSFIDLE示例，其中包含我的问题

这是代码

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

函数滚动条（）{
elem=document.getElementById（'box_area'）；
if（元素clientHeight<元素scrollHeight）{
警报（“有滚动条”）；
var inpbh=$（“#内部#邮箱”）.height（）；
var inpbh_val=$（“#box_area_height”）.val（inpbh）；
$（“#长方体面积”）。高度（inpbh_val）；
//$（“#长方体区域”）.autosize（）；
如果（$（“#方框面积”）.hasClass（“减损”））{
var inpbh=$（“#内部#邮箱”）.height（）；
var inpbh_val=$（“#box_area_height”）.val（inpbh）；
$（“#长方体面积”）。高度（inpbh_val）；
}
}否则{
$（“#长方体区域”）.autosize（）；
$（“#长方体面积”）.attr（'class'，'expand'）；
}
}
$（“#长方体区域”）.autosize（）；
$（“#长方体区域”）.keyup（函数（）{
如果（$（“#长方体面积”）.height（）>300{
if（$（“#方框面积”）.hasClass（“扩展”））{
$（“#框#u区域”）.trigger（'autosize.destroy'）；
美元（“#方框面积”）.attr（'class'，'detract'）；
}
}否则{
$（“#长方体区域”）.autogrow（）；
$（“#长方体面积”）.attr（'class'，'expand'）；
}
});

只需将这段代码添加到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>

$（“#框#u区域”）.keyup（函数（）{
如果（$（“#长方体面积”）.height（）>300{
if（$（“#方框面积”）.hasClass（“扩展”））{
$（“#框#u区域”）.trigger（'autosize.destroy'）；
美元（“#方框面积”）.attr（'class'，'detract'）；
$（“#长方体面积”）.addClass（‘扩展’）；
}
}否则{
$（“#长方体区域”）.autogrow（）；
$（“#长方体面积”）.attr（'class'，'expand'）；
}
});
.expanded{height:300px；overflow-x:auto}

var minHeight=50；
var maxHeight=200；
$（'textarea'）。在（'input'，function（）上{
var clone=$（this.clone（）；
clone.attr（'rows'，1）；
css（'height'，'none'）；
css（'position'，'absolute'）；
css（'visibility'，'visible'）；
clone.val（$（this.val（））；
$（此）.after（克隆）；
var rowscont=（克隆[0]。scrollHeight-2*parseFloat（clone.css（'padding'））/clone.height（）；
var textHeight=rowsCount*parseFloat（$（this.css（'font-size'））；
textHeight=textHeight>minHeight&&textHeight=maxHeight？maxHeight:minHeight；
$（this.attr（'rows'，Math.round（texthheight/parseFloat（$（this.css（'font-size'））））
$（this.css（'height'，'none'）；
clone.remove（）；
})
$（'textarea'）.attr（'rows'，Math.round（minHeight/parseFloat（$（'textarea'）.css（'font-size'）））

---

这很好，但是现在当您删除文本时，它不会收缩。您想收缩框吗？是在您清除所有文本时吗？是在您清除文本以便文本区域上没有滚动条时

$("#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>

var minHeight = 50;
var maxHeight = 200;

$('textarea').on('input' , function(){

  var clone = $(this).clone();
  clone.attr('rows' , 1);
  clone.css('height' , 'none');
  clone.css('position' , 'absolute');
  clone.css('visibility' , 'visible');
  clone.val($(this).val());
  $(this).after(clone);

  var rowsCount = (clone[0].scrollHeight-2*parseFloat(clone.css('padding')))/clone.height();

  var textHeight = rowsCount*parseFloat($(this).css('font-size'));

  textHeight = textHeight > minHeight && textHeight < maxHeight ? textHeight : textHeight >= maxHeight ? maxHeight : minHeight;


  $(this).attr('rows', Math.round(textHeight / parseFloat($(this).css('font-size'))))
  $(this).css('height' , 'none');

  clone.remove();
})

$('textarea').attr('rows', Math.round(minHeight / parseFloat($('textarea').css('font-size'))))