Textarea to resize based on content length
JavascriptJavascript Problem Overview
I need a textarea where I type my text in the box, it grows in length as needed to avoid having to deal with scroll bars and it need to shrink after delete text! I didn’t want to go down the mootools or jquery route because I have a lightweight form.
Javascript Solutions
Solution 1 - Javascript
You can check the content's height by setting to 1px
and then reading the scrollHeight
property:
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
It works under Firefox 3, IE 7, Safari, Opera and Chrome.
Solution 2 - Javascript
You may also try contenteditable
attribute onto a normal p
or div
. Not really a textarea
but it will auto-resize without script.
.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}
<div class="divtext" contentEditable>Hello World</div>
Solution 3 - Javascript
Use this function:
function adjustHeight(el){
el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}
Use this html:
<textarea onkeyup="adjustHeight(this)"></textarea>
And finally use this css:
textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}
The solution simply is letting the scrollbar appears to detect that height needs to be adjusted, and whenever the scrollbar appears in your text area, it adjusts the height just as much as to hide the scrollbar again.
Solution 4 - Javascript
A jquery solution has been implemented, and source code is available in github at: https://github.com/jackmoore/autosize .
Solution 5 - Javascript
Alciende's answer didn't quite work for me in Safari for whatever reason just now, but did after a minor modification:
function textAreaAdjust(o) {
o.style.height = "1px";
setTimeout(function() {
o.style.height = (o.scrollHeight)+"px";
}, 1);
}
Hope this helps someone
Solution 6 - Javascript
Decide a width and check how many characters one line could hold, and then for each key pressed you call a function that looks something like:
function changeHeight()
{
var chars_per_row = 100;
var pixles_per_row = 16;
this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px';
}
Havn't tested the code.
Solution 7 - Javascript
I don't think there's any way to get width of texts in variable-width fonts, especially in javascript.
The only way I can think is to make a hidden element that has variable width set by css, put text in its innerHTML, and get the width of that element. So you may be able to apply this method to cope with textarea auto-sizing problem.
Solution 8 - Javascript
You can achieve this by using a span and a textarea.
You have to update the span with the text in textarea each time the text is changed. Then set the css width and height of the textarea to the span's clientWidth and clientHeight property.
Eg:
.textArea {
border: #a9a9a9 1px solid;
overflow: hidden;
width: expression( document.getElementById("spnHidden").clientWidth );
height: expression( document.getElementById("spnHidden").clientHeight );
}