0
477
VistasCSS Textarea que se expande a medida que escribe texto
Tengo un Textarea donde los usuarios pueden ingresar texto. Por defecto tiene una altura de 17px. Sin embargo, si los usuarios insertan una gran cantidad de texto, quiero que el área de texto se expanda en consecuencia. ¿Hay alguna manera de hacer esto con CSS? ¡¡Gracias por adelantado!!
3 Respuestas
Responde la pregunta0
Sé que esto es un poco tarde, pero tengo que decir que hay una forma de usar <div> con el atributo contenteditable para simular el comportamiento deseado.
.textareaElement { width: 300px; min-height: 17px; border: 1px solid #ccc; max-height: 150px; overflow-x: hidden; overflow-y: auto; } <div class="textareaElement" contenteditable></div>Simplemente configure su altura mínima y máxima, con los valores de desbordamiento adecuados, y tendrá un cuadro de texto expandible de CSS puro completamente funcional, que también es bien compatible.
0
Esto no se puede hacer solo con CSS. prueba el complemento jquery de crecimiento automático. https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
También puede ver la demostración de crecimiento automático aquí http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html
Es ligero y fácil de usar. Así es como se hace. Defina su ID de área de texto. Incluya el archivo jquery js antes de </body> . Luego, entre etiquetas de script, emita el comando jquery $("#txtInput").autoGrow();
<body> <textarea id="txtInput"></textarea> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script> $("#txtInput").autogrow(); </script> </body>0
Este complemento de jQuery es realmente excelente: http://www.jacklmoore.com/autosize
He probado un montón de estos y este es, con mucho, el mejor. También da un ejemplo del uso de un efecto de transición CSS que es bastante ingenioso.