Contador de caracteres mediante Javascript

Un contador de caracteres, como su propio nombre indica, cuenta el número de caracteres ingresados en un campo de texto. Además muestra una notificación sobre la cantidad de caracteres escritos en un cuadro de texto. Si deseas mostrar el número de caracteres ingresados o los caracteres restantes en un textarea, un contador de caracteres es la mejor opción para ello.

Nuestro contador de caracteres inline mostrará el número de caracteres cuando el usuario comience a ingresar texto en un campo input o en un textarea.

Los contadores de caracteres se usan para muchos propósitos en los campos de texto. Aquí le mostraremos algunos de los contadores de caracteres más comúnmente utilizados en los campos de texto. El código contará los caracteres del campo de texto y muestra el número en la página web.

Contador de caracteres

El siguiente código cuenta el número de caracteres introducidos en un campo textarea y muestra el contador al usuario.

Código Javascript

La función countChars() define la longitud del texto a un elemento charNum utilizando la propiedad innerHTML.

function countChars(obj){
    document.getElementById("charNum").innerHTML = obj.value.length+' characters';
}

Codigo HTML

Llamaremos a la función countChars() en el evento onkeyup del campo de texto. Es decir, ejecutaremos dicha función cada vez que el usuario teclee dentro del campo.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">0 characters</p>

Contador de caracteres con longitud máxima

El siguiente código cuenta el número de caracteres y muestra cuántas letras te has pasado de la longitud máxima.

Codigo Javascript

La función countChars() define la longitud del texto para el elemento charNum utilizando la propiedad innerHTML. Si la longitud del texto es mayor que la longitud máxima, el color será rojo.

function countChars(obj){
    var maxLength = 20;
    var strLength = obj.value.length;
    
    if(strLength > maxLength){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">'+strLength+' out of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = strLength+' out of '+maxLength+' characters';
    }
}

Codigo HTML

Llamaremos a la función countChars() en el evento onkeyup del campo de texto. Es decir, ejecutaremos dicha función cada vez que el usuario teclee dentro del campo.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">0 characters</p>

Contador de caracteres restantes

El siguiente código cuenta los caracteres restantes en el campo textarea y muestra si el usuario excede el límite de longitud máxima.

Código de JavaScript

La función countChars () define la longitud de texto restante para el elemento charNum utilizando la propiedad innerHTML. Si el usuario excede la longitud máxima, el color será rojo.

function countChars(obj){
    var maxLength = 20;
    var strLength = obj.value.length;
    var charRemain = (maxLength - strLength);
    
    if(charRemain < 0){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
    }
}

Codigo HTML

Llamaremos a la función countChars() en el evento onkeyup del campo de texto. Es decir, ejecutaremos dicha función cada vez que el usuario teclee dentro del campo.

<textarea name="message" onkeyup="countChars(this);"></textarea>
<p id="charNum">25 characters remaining</p>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP