Con el nuevo estándar de HTML5 podemos alcanzar lugares que antes era impensables o territorio de Javascript. A día de hoy, no hay nada nativo para conseguir que un textarea crezca según vas escribiendo; a no ser que hagas trampas. Es necesario recurrir a artes oscuras como usar el atributo contenteditable el cual nos permite convertir cualquier elemento HTML en una zona editable. Todo sin Javascript.
Demo
Prueba a escribir y dar algunos saltos de línea. ¡Crece!
HTML
Nos valemos de un div aunque también sería posible un span.
<div contenteditable class="fake-textarea"></div>
CSS
Primero hay que darle un aspecto más similar al textarea con algún borde y a continuación before para logar imitar el placeholder. Por último un min-height para evitar un error visual si se añaden y quitan muchos saltos de línea (gracias a Jorge Villegas).
.fake-textarea {
border: 1px solid black;
width: 30rem;
padding: .5rem;
min-height: 3rem;
}
.fake-textarea:empty::before {
position: absolute;
content: "Write here...";
}
SASS
Si eres de los que usar un preprocesador, puedes usar la siguiente versión.
.fake-textarea
border: 1px solid black
width: 30rem
padding: .5rem
min-height: 3rem
&:empty::before
position: absolute
content: "Write here..."
Todo unido
<html>
<head>
<style>
.fake-textarea {
border: 1px solid black;
width: 30rem;
padding: .5rem;
min-height: 3rem;
}
.fake-textarea:empty::before {
position: absolute;
content: "Escribe aquí...";
}
</style>
</head>
<body>
<div contenteditable class="fake-textarea"></div>
</body>
</html>
Bonus: Necesito enviar con <form>
En ese caso necesitarás que esté presente un textarea real, pero oculto. En cada ocasión que se escriba en el falso campo, se rellenará en textarea auténtico, aunque no se vea. Hay que usar una pizca de Javascript.
<html>
<head>
<style>
.fake-textarea {
border: 1px solid black;
width: 30rem;
padding: .5rem;
min-height: 3rem;
}
.fake-textarea:empty::before {
position: absolute;
content: "Escribe aquí...";
}
#description {
display: none;
}
</style>
</head>
<body>
<form>
<!-- Falso y edita el usuario -->
<div contenteditable class="fake-textarea" oninput="document.querySelector('#description').textContent = this.innerText"></div>
<!-- Real y oculto -->
<textarea id="description"></textarea>
<!-- Botón para enviar el formulario -->
<input type="submit" value="Enviar">
</form>
</body>
</html>
{{ comments.length }} comentarios