Question

我试图阻止带有autogrow.js的textarea从300px高度后增长然后销毁自动增长textarea以便它有滚动条，虽然我用来做这个的代码工作正常我可以阻止textarea增长之后300px但是当发生这种情况时，textarea突然变得小于300px。

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

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

我有一个工作的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>

Answer 2

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

http://jsfiddle.net/yann86/5zrw3zrb/5/

试图阻止textarea在300px之后增长，然后摧毁autogrow textarea

2 个答案: