如何扩展textarea以适合垂直和水平放置文本？

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?

Answer 1

the solution for the height is fine.

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

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

Answer 2

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

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