How To Expand Textarea To Fit Text Vertically And Horizontally?

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

Solution 1:

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.

functiontextAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (90+o.scrollHeight)+"px";
    x = $('textarea').val().replace(/&/g, '&')
     .replace(/>/g, '>')
     .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());
}

Solution 2:

the solution for the height is fine.

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

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

Solution 3:

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

})