How To Expand Textarea To Fit Text Vertically And Horizontally?
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, '<')
.replace(/ /g, ' ')
.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);
})
Post a Comment for "How To Expand Textarea To Fit Text Vertically And Horizontally?"