How to expand textarea to fit text vertically and horizontally?

Question

How can I do something like this using html, css and jquery?

I found this question Textarea to resize based on content length but it only expands height of textarea.

I want that my textarea precisely imitate what user is inputing. So if user is writing text into a row, row doesnt end until the user hit "enter". The width of textarea could be larger than the window. Same thing for the height.

Also Im searching for solution which allows me to change the fontsize and the textarea resize to fit it.

Does anyone have an idea?

I think what you really looking for is , flexbox , you could see great tutorial here - http://flexboxin5.com/ — Dan Kuida, Jun 10 '15 at 15:41
I've got this for the horizontal expanding https://jsfiddle.net/chk67a2f/ — George, Jun 10 '15 at 15:50
Something like this post: http://stackoverflow.com/questions/4954252/css-textarea-that-expands-as-you-type-text — depperm, Jun 10 '15 at 15:55

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Thanks everyone for their advices and responses, but finally I came with my own, a little bit workaround, solution.

So I used this Textarea to resize based on content length as script expanding the height of textarea.

To expand the width of textarea I created a hidden div, whom I copied the text from textarea and recursively I assigned the width of div to textarea. Of course you have to set same styling of text for both elements.

Also as I wanted the textarea to be able to inflate itself "to infinite and beyond", thats why Im changing the width of html and body also.

function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (90+o.scrollHeight)+"px";
    x = $('textarea').val().replace(/&/g, '&amp;')
     .replace(/>/g, '&gt;')
     .replace(/</g, '&lt;')
     .replace(/ /g, '&nbsp;')
     .replace(/\n/g, '<br>');
    $('div').html(x);
    $('html').css('width',$('div').width()+50);
    $('body').css('width',$('html').width());
    $('textarea').css('width',$('html').width());
}

score 0 · Answer 2 · answered Jun 10 '15 at 15:49

0

the solution for the height is fine.

to make it look horizontally proper, add the following css,

textarea {
  width: 100%;
  display: block;
  resize: vertical;
}

answered Jun 10 '15 at 15:49

Avijit Kumar

538
2
9

1

"The width of textarea could be larger than the window" – George Jun 10 '15 at 15:51

Keval Bhatt · Answer 3 · 2015-06-10T16:26:12.607

Use onkeypress even

see this example :http://jsfiddle.net/kevalbhatt18/bkyxz8cc/3/

<textarea id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></textarea>

And for placeholder on load use jquery and apply placeholder size in to input

$('textarea').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

Even you can use id instead of input this is just an example so that I used $(input)

And in css provide min-width

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

If you remove all text from textarea box then it will take placeholder value using focusout

  $("textarea").focusout(function(){

    if(this.value.length>0){
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    }else{
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    }

});

For change the fontsize and the textarea resize

use button click

$('button').on('click',function(){
    var style={
        "font-size":"20px",
        "height":"90px",
        "width":"40%",
    }
$('textarea').css(style);

})

This assumes each character is the same width, 8 pixels, which is probably inaccurate at best and incorrect at worst. — Patrick, Dec 09 '21 at 10:22

How to expand textarea to fit text vertically and horizontally?

3 Answers3

Linked