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.
+2
A:
jQuery is lightweight as well. Don't reinvent the weel... At least, check the jQuery's solution and try copy it.
erenon
2009-06-15 09:23:48
+1
A:
One method is to do it without JavaScript and this is something like this:
<textarea style="overflow: visible" />
BobbyShaftoe
2009-06-15 09:24:21
this doesn't work and textarea needs to have a closing tag
annakata
2009-06-15 09:31:04
Actually, it is closed if you follow your XML literature a little more closely. Although, XHTML-1.0-Strict may not support the minimzied syntax for textarea's; not sure about that. As for it not working: it works for me.
BobbyShaftoe
2009-06-15 10:32:40
It doesn't work under Firefox, Safari, Chrome or Opera. So it probably isn't a very good solution, though it's perfect if you only target Internet Explorer.
Alsciende
2009-06-15 11:59:23
From what I can tell this only works in Internet Explorer when the page is rendered using quirks mode.
wrumsby
2009-10-14 02:38:46
A:
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.
Ivarska
2009-06-15 09:24:40
A:
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.
Achimnol
2009-06-15 09:59:25
A:
Hi, 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) }
rahul
2009-06-15 10:13:45
+3
A:
Try this :
<html>
<head>
<script>
function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}
</script>
</head>
<body>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
</body>
</html>
It works under Firefox 3, IE 7, Safari, Opera and Chrome.
Alsciende
2009-06-15 10:21:01
There's a problem in Firefox, if your user inputs a very long word (no white space, larger than the textarea) then "overflow:hidden" will prevent her from seeing the right end of the word. Other browsers don't care since they will line-break even without white spaces.You can remedy to this by using "overflow-y:hidden" instead, but then your css is not standards-compliant.
Alsciende
2009-06-15 12:27:34
Regarding the Firefox problem, it might be resolved soon: http://stackoverflow.com/questions/47817/most-elegant-way-to-force-a-textarea-element-to-line-wrap-regardless-of-whites
Alsciende
2009-06-15 12:33:49
A:
You may also try contenteditable attribute onto a normal p or div. Not really a textarea but it will auto-resize without script.
<!DOCTYPE html>
<style>
.divtext {
border: ridge 2px;
padding: 5px;
width: 20em;
min-height: 5em;
overflow: auto;
}
</style>
<div class="divtext" contentEditable>Hello World</div>
billyswong
2009-06-15 10:24:36