Desde que apareció por primera vez en Facebook, las áreas de texto elásticas: <textarea> elementos que se expanden o encogen automáticamente dependiendo de la cantidad de texto que ingrese el usuario, se ha convertido en uno de los efectos de interfaz de usuario funcionales más geniales de la web. En este artículo, te guiaré a través de la recreación de este asombroso efecto usando Ext JS, y te apuesto a que te sorprenderá ver lo fácil que es hacerlo.
Demo en vivo
Vea el ejemplo de lo que crearemos haciendo clic en el siguiente enlace.
Que necesitarás
Para este tutorial, usaremos el marco de JavaScript Ext JS, mi marco favorito para el desarrollo de aplicaciones web entre navegadores. Explicaré la mecánica paso a paso para que, si lo prefiere, pueda implementar la misma lógica de programación utilizando otro marco / biblioteca de JavaScript o solo con JavaScript.
En este ejemplo, solo se necesitará Ext Core.
¿Qué es Ext JS?
Ext JS se describe a sí mismo como un «biblioteca JavaScript entre navegadores para crear aplicaciones de Internet enriquecidas“. Aunque es cierto, esta descripción es demasiado sucinta para describir el poder y las capacidades de este excelente marco de JavaScript.
Es la herramienta perfecta para crear aplicaciones de Internet enriquecidas (RIA): tiene una biblioteca de efectos imponente y un juego de herramientas GUI impresionante, que le proporciona toneladas de componentes que imitan la fluidez y complejidad de las aplicaciones de escritorio en la web.
Ext JS está disponible en dos sabores: Ext Core y Ext JS.
Ext Core es la «versión lite» de Ext JS, que ofrece el mismo tipo de funcionalidades que puede encontrar en otros frameworks JS populares (como jQuery o MooTools). Tiene una licencia de MIT muy permisiva. Sin embargo, algunas funciones que están disponibles en Ext JS no están disponibles en Ext Core, pero en nuestro caso, está bastante bien.
Ext JS está repleto de muchas funciones adicionales y muchos dispositivos GUI. Puede obtenerlo con una de las dos licencias: con una GPL o una licencia comercial que exime de las restricciones de la GPL. Está extremadamente bien documentado con toneladas de demostraciones y un manual fácil de seguir. También tiene un gran apoyo de la comunidad, aunque pueden ser un poco duros para los principiantes que no buscan primero si su pregunta ya ha sido respondida antes de hacer preguntas. Si está interesado en aprender más sobre Ext JS, consulte este excelente tutorial que está disponible aquí.
La cuestión
Desafortunadamente no hay textarea.contentHeight o un método similar, así que olvídate de una forma directa de obtener la altura del texto.
«Entonces, ¿cómo hago textarea ¿crecer y encogerse?»
Un posible enfoque para encontrar un textareaLa altura es para obtener el tamaño de la fuente y el ancho del área de texto y contar el número de caracteres escritos. Pero luego, cuando presiona la tecla Intro, sus cálculos se arruinan.
«Bien, eso no es un problema … Puedo poner la tecla Enter en la ecuación», podría pensar, pero luego debe pensar en el formato CSS (es decir, relleno, altura de línea o tamaño de fuente).
¿Ves cómo esto puede convertirse en una pesadilla en poco tiempo?
No se desespere: ¡hay una manera fácil de usar Ext JS!
El truco
Para hacer el textarea crecer o reducir, necesita obtener la altura de su contenido y tener en cuenta los estilos CSS que afectan el formato de texto como font-size, line-heightetc.
El truco para obtener la altura del texto es imitar la textarea contenidos en un oculto div.
Para obtener un efecto decente, también limitaremos los tamaños mínimo y máximo del área de texto, no hay belleza en una altura de 0 px textarea.
Muy bien, es hora de ensuciarnos las manos.
Paso 1: Sentar las bases
El primer paso es crear una función y configurar algunas variables de control; nombraremos esta función elasticTextArea.
También declaramos dos funciones adicionales que nos permiten obtener y configurar todos los estilos CSS a la vez.
function elasticTextArea (elementId){
/*
* This are two helper functions, they are declared here for convenience
* so we can get and set all styles at once and because they are not
* available in ext-core only in Ext JS
*/
//available in Ext JS (not ext-core) as element.getStyles
function getStyles(el, arguments){
var ret = {};
total = arguments.length;
for (var n=0; n< len;) {
el.setStyle(styles[i++], styles[i++]);
}
} else if (Ext.isObject(styles)) {
el.setStyle(styles);
}
}
}
//minimum and maximum textarea size
var minHeight = 10;
var maxHeight = 300;
//increment value when resizing the textarea
var growBy = 20 ;
var el = Ext.get(elementId);
Paso 2: Obtén los estilos CSS de textarea
Para obtener una medición precisa, necesitamos obtener los estilos CSS del área de texto que afectan el formato del texto, y son:
paddingfont-size(y otros estilos de fuente)font-familyline-heightwidth
//get textarea width
var width = el.getWidth();
//current textarea styles
var styles = el.getStyles('padding-top', 'padding-bottom', 'padding-left',
'padding-right', 'line-height', 'font-size',
'font-family', 'font-weight', 'font-style');
//store textarea width into styles object to later apply them to the div
styles.width = width +'px';
//hide the textarea scrool to avoid flickering
el.setStyle('overflow', 'hidden');
Paso 3: crea el div oculto
Y aquí es donde comienza la magia. Comenzamos creando un contenedor oculto para el contenido del área de texto.
Fijamos su posición para absolute – de esta manera, el div se elimina del flujo del diseño y se coloca fuera del área visible del navegador.
Nota: estableciendo su visibility Atributo CSS a hidden o su display para none hace que algunos navegadores no recalculen su altura, por eso optamos por este método.
También le indicamos al área de texto que vuelva a calcular su altura volviendo a ejecutar esta función en cada pulsación de tecla; otro método es ejecutarlo en un intervalo específico, pero me parece que consume más recursos y es menos elegante de esa manera.
//create the hidden div only if does not exists
if(!this.div){
//create the hidden div outside the viewport area
this.div = Ext.DomHelper.append(Ext.getBody() || document.body, {
'id':elementId + '-preview-div',
'tag' : 'div',
'style' : 'position: absolute; top: -100000px; left: -100000px;'
}, true);
//apply the textarea styles to the hidden div
Ext.DomHelper.applyStyles(this.div, styles);
//recalculate the div height on each key stroke
el.on('keyup', function(){
elasticTextArea(elementId);
}, this);
}
Paso 4: Copie el contenido del área de texto en el div oculto y obtenga su altura
Para asegurar una medición correcta, reemplazamos algunos caracteres especiales con sus entidades de caracteres HTML y también agregamos un espacio (' ') cadena a la nueva línea para forzar su representación.
/* clean up textarea contents, so that no special chars are processed * replace n with so that the enter key can trigger a height increase * but first remove all previous entries, so that the height measurement * can be as accurate as possible */ this.div.update( el.dom.value.replace(//, '') .replace(/<|>/g, ' ') .replace(/&/g,"&") .replace(/n/g, '') ); //finally get the div height var textHeight = this.div.getHeight();
Paso 5: cambiar el tamaño del área de texto
En el último paso, le damos al área de texto su nueva altura.
//enforce textarea maximum and minimum size
if ( (textHeight > maxHeight ) && (maxHeight > 0) ){
textHeight = maxHeight;
el.setStyle('overflow', 'auto');
}
if ( (textHeight < minHeight ) && (minHeight > 0) ){
textHeight = minHeight ;
}
//resize the textarea
el.setHeight(textHeight + growBy , true);
}
Pruébalo
¿No fue tan simple? Guarde el código JavaScript que escribimos como elasticTextarea.js o descargue la fuente, incluya Ext Core y la biblioteca JavaScript, y diviértase.
Para incluir las bibliotecas JS:
<script type="text/JavaScript" src="https://www.webfx.com/blog/web-design/build-an-elastic-textarea-with-ext-js/ext-core/ext-core.js"></script> <script type="text/JavaScript" src="elastic.js"></script>
El HTML para el área de texto:
<textarea id="ta"></textarea>
Para llamar a la función (siendo ‘ta’ el ID del textarea):
<script type="text/JavaScript">
elasticTextArea("ta");
</script>
Conclusión
El propósito de este artículo es presentarle Ext JS. Si conoce bien su JavaScript, es posible que este código solo funcione para un área de texto. Si desea una solución más robusta y flexible, obtenga el complemento Ext JS que se puede encontrar en mi sitio.
Estén atentos para más tutoriales de Ext JS aquí sobre Six Revisions, escritos por mí. Los tutoriales futuros cubrirán los complementos Ext JS y hablarán sobre efectos de interfaz de usuario más interesantes y fáciles de crear utilizando el marco Ext JS RIA.