Contador de caracteres para áreas de texto con Vanilla JavaScript

En este tutorial, aprenderá cómo implementar un contador de caracteres personalizado para áreas de texto en JavaScript, desde cero.

Introducción

Un contador de caracteres es una función de interfaz de usuario útil que muestra el número restante de caracteres que un usuario puede ingresar en un campo de texto, si un campo de texto está limitado a un tamaño de entrada relativamente pequeño (como Twitter' límite de 280 caracteres por tweet). Esta característica se usa comúnmente junto con los elementos área de texto y/o campo de entrada para notificar al usuario la cantidad de caracteres usados ​​y restantes.

En este artículo, aprenderemos cómo implementar un contador de caracteres para áreas de texto en JavaScript desde cero.

Probablemente el ejemplo más famoso de un contador de caracteres es el contador de caracteres de Twitter. Te notifica cuando la longitud de tu tweet se acerca y supera los 280 caracteres, pero no te impide escribir más caracteres. Esta característica es muy apreciada porque no corta el texto cuando pega un fragmento de texto más largo que la longitud de caracteres prescrita y le permite planificar adecuadamente cómo lo dividirá en varios tweets.

Al final de este artículo, podrá crear un campo de entrada como este:

character-counter-javascript

{.icon aria-hidden=“true”}

Nota: Todo el código involucrado en la creación del formulario estará presente en la guía. Además, el código fuente y la vista previa en vivo están disponibles en CódigoPen.

Cómo implementar un contador de caracteres en JavaScript

Lo primero que debemos configurar antes de implementar el contador de caracteres es un formulario HTML básico. Contendrá un campo textarea y un texto que representa un contador de caracteres. Muestra el número máximo de caracteres y el número de caracteres restantes. Si se supera el número de caracteres permitido, el texto cambia de color a rojo:

1
2
3
4
5
6
<form>
    <h3>Write Bio: </h3>
    <textarea name="tweet" id="textbox" class="form-control" rows="10" cols="60"></textarea>
    <span id="char_count">100/100</span>
    <button type="submit">Save</button>
</form>

Declaración de variables

Después de crear un formulario HTML básico, el siguiente paso es implementar una lógica de contador de caracteres usando JavaScript. El primer paso para crear la lógica JavaScript es definir nuestras variables y obtener los componentes DOM que utilizaremos más adelante. Específicamente el campo textarea y el elemento span que muestra el contador de caracteres:

1
2
3
let textArea = document.getElementById("textbox");
let characterCounter = document.getElementById("char_count");
const maxNumOfChars = 100;

El textArea se usará para agregar un evento que activará la función lógica. Hay numerosos eventos que podemos usar, pero keyup es el que mejor se adapta a este caso de uso, ya que activará la función lógica cada vez que se presione una tecla: se agrega o elimina un carácter del área de texto. El characterCounter se usa para mostrar el contador de caracteres, y el maxNumOfChars define el número máximo de caracteres que un usuario puede ingresar.

Implementando la lógica {#implementando la lógica}

El siguiente paso sería crear la lógica fundamental que nos permita determinar la longitud del texto escrito en textArea, así como deducir la longitud del número máximo de caracteres que hemos elegido. Así es como podría verse la estructura de la función lógica:

1
2
3
4
5
const countCharacters = () => {
    // Calculate the number of characters entered into the textarea
    // Calculate the number of characters left
    // Display this number in the span tag
};

Y así es como se ve la implementación de la estructura mencionada:

1
2
3
4
5
const countCharacters = () => {
    let numOfEnteredChars = textArea.value.length;
    let counter = maxNumOfChars - numOfEnteredChars;
    characterCounter.textContent = counter + "/100";
};

{.icon aria-hidden=“true”}

Nota: Tenga en cuenta que countCharacters() no maneja ningún estilo en este momento. Por ejemplo, nos gustaría cambiar el color del contador a rojo cuando se acerque o supere el número máximo de caracteres. Implementaremos esto en un momento, ya que es un tipo de adición más subjetivo.

Finalmente, para que esto funcione, debemos agregar un eventListener que activará/llamará a este método cada vez que se agregue/elimine un carácter del campo textarea usando el evento input. Alternativamente, podemos usar los eventos keyup o keydown en su lugar:

1
textArea.addEventListener("input", countCharacters);

Personalización del color del mostrador

Nos gustaría 'avisar' a un usuario cuando se supere el número máximo definido de caracteres, así como cuando se esté acercando a él. Esto se logra fácilmente mediante el uso de declaraciones condicionales en las que verificamos si el “contador” es menor que cero o menor que, digamos, “20” si queremos alertarlos de que se están acercando al límite:

1
2
3
4
5
6
7
if (counter < 0) {
    characterCounter.style.color = "red";
} else if (counter < 20) {
    characterCounter.style.color = "orange";
} else {
    characterCounter.style.color = "black";
}

Aquí, solo hemos cambiado el texto en función de la cantidad de caracteres restantes. Hay mucho que puedes cambiar allí. Por ejemplo, puede desactivar textarea si se escriben demasiados caracteres, truncar el contenido automáticamente, etc.

Conclusión

En esta breve guía, hemos analizado cómo crear un contador de caracteres y adjuntarlo a un área de texto en JavaScript, desde cero, con un código mínimo y eficaz.