jQuery
jQuery
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a crear un sencillo plugin con jQuery para poder contar y controlar los caracteres de nuestros textareas, al que no conozca la sintaxis para crear un plugin con jQuery estoy seguro que le será muy útil, aparte, aprenderemos a pasar opciones de configuración para que pueda ser al gusto del usuario.

Nuestro plugin tendrá como parámetros en el constructor el número de caracteres que deseamos permitir, el background del textarea, el color de las letras, el border radius, si permitimos pegar contenido en el mismo y el número de columnas y de filas de nuestro textarea, así que como veis, podemos añadir todos los que necesitemos con un poco de imaginación. Como veremos, a estos parámetros les damos valor por defecto para no recibir undefined, lo que significaría que algo no funciona, todos son opcionales.

Al hacer la llamada a nuestro plugin sobre un textarea, veremos como debajo del mismo se crea un input solo de lectura donde nos irá mostrando los carácteres restantes así como el total.

Con todo lo anterior ya podemos empezar a crear nuestro plugin. Creamos un archivo llamado textarea.js y empezamos viendo primero la estrucutura de un plugin, poco a poco veremos lo demás.

Esa es la estructura que necesitamos para crear un plugin, nuestro plugin se llamará textarea, muy fácil, seguimos.

Como vemos como parámetro a la función le pasamos options, el cuál contiene un objeto json con los parámetros de nuestro plugin. Con la línea if(options) comprobamos si hay opciones, si hay así, las incorporamos a nuestro plugin con $.extend, de esta forma podremos especificar los parámetros que queremos pasar a nuestro plugin.

Ahora vemos el resto de código completo, el cuál está explicado al detalle en cada punto.

Con el código anterior estamos en disposición de crear un sencillo textarea y utilizar nuestro plugin sobre él, veamos lo sencillo que puede llegar a ser.

Y con eso ya podemos hacer uso en todos los textarea que queramos de nuestro plugin, el cuál puede ser muy útil.
Espero que se haya entendido y sea de ayuda, un saludo.