HTML TextArea autoheight

Question

I'm working on a textarea that has no [rows] attribute. On first, the height should be 35px.

----------


Text Here

----------

Then, if the user break a new line [Shift + Enter]. the textarea should be like this.

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

Text Here

Another Line

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

But, on the next new line. the textarea should be scrollable.

Thanks in advance.

Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — prasanth, Sep 20 '17 at 11:09

score 1 · Accepted Answer · edited Sep 21 '17 at 07:37

1

You should add following code:

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

edited Sep 21 '17 at 07:37

answered Sep 20 '17 at 11:09

Michał Ochociński

430
3
11

Hi Michal, I already did that. but on first the height should be 35 and should adjustable up to 75px. and then scrollable. but when you enter Shift+enter the height didn't adjust – Riku Sep 20 '17 at 11:14

score 0 · Answer 2 · answered Sep 20 '17 at 11:15

You can check scrollHeight of your textarea at every keyup event and then set height accordingly.

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

And also you need to set overflow hidden.

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

Fiddle

score 0 · Answer 3 · answered Sep 20 '17 at 11:43

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

I don't know if it is a good idea.

HTML TextArea autoheight

3 Answers3