Ese ejemplo no funciona. Con suerte podría andar en IE.
Estás tratando de manipular uno de los elementos más difíciles del HTML. ¿Realmente tiene que ser un
textarea? ¿No te sirve una simulación?
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TEXTAREA TRUCHO AUTOAJUSTABLE.</title>
<script type="text/javascript">
var ref , cont = ":-)";
function sapeartextarea(){
ref = document.getElementById("textarea");
document.getElementById("guardatxt").style.height = ref.offsetHeight + "px";
document.getElementById("guardatxt").style.width =
(ref.offsetWidth > 300)? ref.offsetWidth + "px" : "300px";
cont = document.getElementById("textarea").innerHTML.replace(/<br>/gi , "\r\n").replace(/ /gi , " ");
}
</script>
<style type="text/css">
#guardatxt { width: 300px; height: 1em; overflow: hidden;
padding: 0.2em; border: solid 1px black; }
#textarea { font: normal 16px/16px monospace; background: yellow; }
</style>
</head>
<body>
<div id=guardatxt onkeyup=sapeartextarea()>
<span contenteditable=true id=textarea>Escriba aquí su texto.</span>
</div>
<input type=button value="ENVIAR" onclick=alert(cont)>
</body>
</html>
Este código tiene un bug en Opera: no acepta saltos de línea en el
span, se "salen". Si alguien tiene una idea de por qué pasa esto me gustaría que me iluminara.
Por otro lado, en Chrome y Firefox el alto se ajusta por línea virtual, el ancho mínimo es ahí de
300px y se agranda si una palabra no puede hacer wrapping.
Para enviar el contenido hay que reemplazar algunas etiquetas y entidades, porque en verdad es HTML y no texto.
En IE no lo probé. Antiguamente tenía la costumbre de meter párrafos adentro del
span, pero supongo que la aberración ya estará corregida.