Contador de caracteres para input y textarea

A continuación vamos a explicar cómo contar caracteres en un input de texto o en un textarea.

Es necesario añadir el atributo "maxlength" en el <input> y en el <textarea> con el valor que queramos que sea el límite denúmero de caracteres (en nuestro caso 150).

Vamos a usar el valor "maxlength" para compararlo con el número de caracteres que llevamos escritos. Lo haríamos con la siguiente instrucción:

$([maxlength]).val().length)

Diseccionemos la instrucción anterior para comprenderla mejor:

$([maxlength]) > Selecciona todos los elementos que tengan el atributo "maxlength"

$([maxlength]).val() > Selecciona el valor de los elementos que tengan el atributo "maxlength", es decir, la cadena de texto que llevamos escrita (nos devuelve un string). Debemos utilizar la palabra clave this o $(this) en jQuery en lugar de $([maxlength]) (siempre que hayamos seleccionado previamente los elementos con atributo "maxlength", y referenciando con this o $(this) desde dentro de la funcion que se ejecute en el evento "keyup") porque si tenemos varios elementos con el atributo "maxlength" cogería el texto que hay escrito en todos ellos.

$([maxlength]).val().length > Selecciona la cantidad de caracteres de la cadena de texto especificada. Esta función devuelve un entero.

Tenéis el ejemplo completo debajo.

See the Pen Contador caracteres input by Pedro Marín (@pedromarin) on CodePen.