Question

我正在处理没有[rows]属性的textarea。首先，高度应为35px。

----------


Text Here

----------

然后，如果用户断开新行[Shift + Enter]。 textarea应该是这样的。

------------------

Text Here

Another Line

------------------

但是，在下一个新线上。 textarea应该是可滚动的。

提前致谢。

Answer 1

您应该添加以下代码：

style: max-height: 35px; overflow: scroll;

Answer 2

您可以在每个keyup事件中检查textarea的scrollHeight，然后相应地设置高度。

  $('textarea').keyup(function(){
    $(this)[0].style.height = ($(this)[0].scrollHeight)+"px";
});

而且你还需要设置溢出隐藏。

textarea {
    resize: none;
    overflow: hidden;
    min-height: 20px; 
}

<强> Fiddle

Answer 3

var text    = $(this).val();
            var newline = text.split('\n');
            if(newline.length === 2) {
                $el.removeClass('scroll');
                $el.attr({
                    style : 'height : 60px'
                });
            }
            if(newline.length === 3) {
                $el.removeClass('scroll');
                $el.attr({
                    style : 'height : 75px'
                });
            }
            if(newline.length > 3) {
                $el.addClass('scroll');
            }

            if(newline.length === 0 || newline.length === 1) {
                $el.removeClass('scroll');
                $el.prop('style',false);
            }

我不知道这是不是一个好主意。

HTML TextArea自动高度

3 个答案: