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?

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?

• javascript
• jquery
• html
• css

• 1 I think what you really looking for is , flexbox , you could see great tutorial here - flexboxin5. – Dan Kuida Commented Jun 10, 2015 at 15:41
• 1 I've got this for the horizontal expanding jsfiddle/chk67a2f – George Commented Jun 10, 2015 at 15:50
• Something like this post: stackoverflow./questions/4954252/… – depperm Commented Jun 10, 2015 at 15:55

3 Answers 3

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, '&')
     .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());
}

the solution for the height is fine.

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

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

Use onkeypress even

see this example :http://jsfiddle/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);

})