Resizable Textarea using pure JavaScript without frameworks:
<html>
<head>
<script>
function taOnInput()
{
var dis = this;
setTimeout(
function(){
var span = document.createElement("div");
span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n
span.style.width = dis.offsetWidth+"px";
span.style.padding = "0px";
span.style.fontFamily = "Lucida Console";
document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack
dis.style.height = span.offsetHeight+"px";
document.body.removeChild(span);
}, 1
); //setTimeout=hack, since oKP is called BEFORE character append.
}
window.onload = function()
{
var resizableTA = document.getElementById("resizableTA");
resizableTA.onkeypress = taOnInput;
}
</script>
<title>ItzWarty - Untitled Document</title>
</head>
<body>
<textarea id="resizableTA">Trololololol</textarea>
</body>
</html>
Very hackish, put it together in less than 10 minutes. Hopefully it'll at least give you an idea.
ONLY tested on Google Chrome 5.0.308.0
Explanation of code, since i fail at commenting
1) before window.onload, the textarea of id "resizableTA" has been created and appended to document.body of DOM tree.
2) window.onload attaches an event handler, taOnInput [textarea on input].
3) textarea on input creates a dummy span, forces its width to the width of the textarea and font style to "Lucida Console", which AFAIK is the default font for textareas, copies the value of the textarea to the span's innerHTML, while replacing %0A [newline that textareas use] with
[line break]...
4) span's offsetHeight is the height of the span, which can now be used to force the height of the textarea.
Can anyone confirm that Lucida Console is the default font of textarea? Is it Consola? Courier New? I assumed any fixed-width font would work. I don't use Mac, so I dont know what fonts it shared with windows, though i think Courier New is a better choice...