En este artículo vamos a mostrar un ejemplo sencillo de Javascript para llevar la cuenta de los caracteres escritos en un campo de formulario textarea. Haremos un ejemplo sencillo con Javascript "vanilla" y al final enlazaremos con otros artículos para hacer ejemplos similares basados en librerías como jQuery.

El diseño de este script fue motivado por la necesidad de hacer la típica caja para enviar mensajes SMS desde Internet. El tamaño máximo de un mensaje SMS de móvil es de 160 caracteres, con lo que es muy útil que la propia página te informe sobre el número de caracteres que se llevan escritos en el mensaje, para que el interesado no se pase del máximo permitido.

El funcionamiento es muy sencillo de entender y seguro que la mayoría de los lectores habrá experimentado una necesidad similar, así que no necesita mucho más contexto para saber a qué nos referimos exactamente.

Para resolver este ejercicio vamos a presentar dos alternativas de código. Comenzaremos por una más moderna y estructurada con prácticas más actuales y recomendables y otra que se había presentado en la publicación del artículo original, que está desarrollada usando prácticas más antiguas que, aún siendo válidas, hoy no se consideran tan aconsejables. De ambas alternativas podemos aprender cosas. A continuación tienes las prácticas más recomendables y al final del artículo dejaremos la alternativa más antigual.

El formulario con el textarea

Vamos a partir desde la parte del HTML, que básicamente presentará un formulario con un campo textarea. El textarea es absolutamente normal, donde el usuario escribirá el mensaje. Además veremos un segundo elemento con un <span> preparado para volcar en todo momento los caracteres escritos en el textarea.

<form action="#" method="post">
  <p>
    Texto:
    <br>
    <textarea cols="40" rows="5" name="texto" id="textareaCaracteres"></textarea>
  </p>
  <p>
    Has escrito <span id="contadorCaracteres"></span> caracteres.
  </p>
</form>

En el código anterior es importante fijarse en los identificadores de los elementos a los que queremos acceder mediante Javascript, definidos en los atributos id. El textarea tiene id="textareaCaracteres" y el span tiene id="contadorCaracteres".

Cómo acceder a los elementos textarea y span

Ahora vamos a crear dos variables para acceder a los elementos textarea y span mediante Javascript. Al elemento textarea queremos acceder para saber sus caracteres y al span para volcar el valor de los caracteres.

let contadorCaracteres = document.getElementById('contadorCaracteres');
let textareaElement = document.getElementById('textareaCaracteres');

Como puedes comprobar hemos accedido a través del identificador de cada uno. Ambos elementos del DOM los tenemos ahora referenciados en dos variables.

Función para colocar el número de caracteres del textarea como texto del span

Ahora queremos mostrar una función que se encargaría de colocar el número de caracteres de un textarea como texto del elemento span.

function mostrarCaracteres(textareaElement, contadorElement) {
  contadorElement.innerText = textareaElement.value.length;
}

Es una función bastante elemental. Simplemente tenemos que enviarle la referencia al elemento textarea y al elemento span donde vamos a colocar el valor de la longitud del textarea.

Para acceder a la longitud del textarea tenemos que acceder a la propiedad length de la propiedad value del elemento textarea (textareaElement.value.length). Para volcar ese valor lo asignamos a la propiedad innerText del objeto span donde queremos ver la cuenta.

En un textarea, la propiedad value tiene la cadena de texto que hay escrito dentro. La propiedad length de una cadena de texto nos indica el número de caraceres que tiene.

A esta función simplemente tenemos que invocarla enviand las referencias del textarea y el span.

Definción de un manejador de evento input sobre el textarea.

El evento llamado input de un textarea se dispara cada vez que el usuario introduce cualquier contenido dentro del campo textarea.

Podemos usar ese evento input para definir un manejador sobre el textarea que nos permita definir qué queremos que ocurra cuando se escribe cualquier nuevo caracter en el campo textarea. En el manejador de eventos nos apoyaremos en la función anterior, enviándole las referencias a los elementos del DOM.

textareaElement.addEventListener('input', function() {
  mostrarCaracteres(textareaElement, contadorCaracteres);
});

Todo el código de cuenta de caracteres junto

Ahora vamos a ver todo el código HTML y Javascript necesario para este ejemplo de una vez, para que nos permita apreciar la solución del problema de una manera más global.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contar los caracteres escritos en un textarea</title>
</head>
<body>
  <h1>Contar los caracteres escritos en un textarea</h1>
  <p>Esta alternativa usa unas prácticas de Javascript más actuales.</p>
  <form action="#" method="post">
    <p>
      Texto:
      <br>
      <textarea cols="40" rows="5" name="texto" id="textareaCaracteres"></textarea>
    </p>
    <p>
      Has escrito <span id="contadorCaracteres"></span> caracteres.
    </p>
  </form>

  <script>
    function mostrarCaracteres(textareaElement, contadorElement) {
      contadorElement.innerText = textareaElement.value.length;
    }

    document.addEventListener('DOMContentLoaded', function() {
      let contadorCaracteres = document.getElementById('contadorCaracteres');
      let textareaElement = document.getElementById('textareaCaracteres');

      mostrarCaracteres(textareaElement, contadorCaracteres);
      textareaElement.addEventListener('input', function() {
        mostrarCaracteres(textareaElement, contadorCaracteres);
      });
    });
  </script>
</body>
</html>

Con respecto al código Javascript, hacemos un repaso de las partes que incluye para que quede perfectamente claro.

• Definimos la función mostrarCaracteres().
• Realizamos un manejador para el evento DOMContentLoaded, que permite asegurarse que el código Javascript se ejecuta cuando el navegador tiene todos los elementos del DOM cargados en la memoria.
• Dentro del manejador DOMContentLoaded creamos las variables que refenrencian a los objetos del DOM con los que necesitamos trabajar.
• Luego invocamos una primera vez la función mostrarCaracteres(). Esto es importante por si hay algo escrito en el campo textarea nada más cargar la página.
• Por último se define el manejador del evento input sobre el textarea para llevar la cuenta de los caracteres cada vez que el usuario introduce cualquier texto en el textarea.

Alternativa de textarea con cuenta de caracteres más antigua

A partir de ahora dejamos toda la descripción del artículo original. Como habíamos dicho, se trata de una alternativa distinta de trabajo, con prácticas más antiguas que no son tan recomendables en la actualidad. De todos modos es un ejercicio muy parecido, solo que utiliza otros mecanismos para definir los manejadores de eventos y otros medios de acceder a los elementos del formulario. En todo caso son técnicas Javascript válidas todavía por lo que podemos aprender otras vías de resolver este mismo problema.

El formulario

La página presentará un formulario con dos campos. El primero con el textarea donde el usuario escribirá el mensaje y el segundo, un campo de texto donde mostraremos en todo momento los caracteres escritos.

El único detalle a tener en cuenta relacionado con Javascript es el par de eventos que tenemos definidos dentro del campo textarea, que sirven para llamar a la función que realiza la cuenta de los caracteres en el momento que el usuario presiona o suelta las teclas. Concretamente se utiliza el evento onKeyDown para definir las acciones a realizar cuando se aprete la tecla y onKeyUp, para definir acciones a ejecutar cuando se suelta la tecla apretada.

<form action="#" name="contadorform" method="post">
<table>
<tr>
    <td>Texto:</td>
    <td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea></td>
</tr>
<tr>
    <td>Caracteres:</td>
    <td><input type="text" name="caracteres" size=4></td>
</tr>
</table>
</form>

En el código anterior también es importante fijarse en los atributos name de los elementos, porque luego usaremos esos nombres para acceder al formulario y los campos que contiene.

El script que cuenta caracteres

Con el formulario y el par de eventos introducidos tenemos todo lo necesario para que se cuenten -y recuenten- los caracteres cada vez que el visitante, situado sobre el textarea, pulsa sobre las teclas, es decir, cada vez que se escribe texto en el textarea. Ahora simplemente nos queda definir la función que se encarga de realizar la cuenta propiamente dicha y situarla en el otro campo de texto del formulario.

<script>
function cuenta() {
  document.forms.cuentaForm.caracteres.value = document.forms.cuentaForm.texto.value.length
}
</script>

Puede que a muchos haya sorprendido la sencillez del script, incluso en comparación con la primera alternatva de resolución de este problema, pero en realidad no hace falta más.

La propiedad value del textarea contiene el texto escrito y a su vez, la propiedad length guarda el número de caracteres de dicho texto. Así, document.forms.cuentaForm.texto.value.length equivale al número de caracteres introducidos dentro del textarea. Este valor se asigna al contenido del campo de texto del formulario donde guardamos el número de caracteres, mediante la propiedad value del campo: document.forms.cuentaForm.caracteres.value.

Con todo ello, se mostrará en el campo de texto el número de caracteres del textarea. Bueno, en realidad para que haga exactamente lo mismo que el ejemplo anterior nos faltaría añadir un evento para que se muestren los caracteres que hay escritos inicialmente en el textarea, si los hubiera.

window.onload = cuenta();

Código completo de esta segunda alternativa de conteo de caracteres del textarea

Ya para acabar vamos a ver el código completo de una página que realiza esta cuenta de los carateres escritos en el campo de texto, con las prácticas vistas en la segunda alternativa.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contar los caracteres escritos en un textarea</title>
</head>
<body>
  <h1>Contar los caracteres escritos en un textarea</h1>
  <p>Esta alternativa usa unas prácticas de Javascript más tradicionales, basadas en el atributo name para el acceso a los campos del formulario.</p>
  
  <form action="#" name="cuentaForm" method="post">
    <table>
      <tr>
        <td>Texto:</td>
        <td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()">texto inicial</textarea></td>
      </tr>
      <tr>
        <td>Caracteres:</td>
        <td><input type="text" name=caracteres size=4></td>
      </tr>
    </table>
  </form>

  <script>
    function cuenta() {
      document.forms.cuentaForm.caracteres.value = document.forms.cuentaForm.texto.value.length
    }
    
    window.onload = cuenta();
  </script>
</body>
</html>

Esperamos que este script haya solucionado vuestras necesidades para llevar la cuenta de los caracteres escritos en el textarea. Si deseamos además restringir el textarea para que no se pueda escribir más que un número de caracteres determinado, puedes continuar esta lectura con el artículo Evitar que un textarea sobrepase un número de caracteres permitidos.