Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Como hacer un contador de caracteres con javascript

javascript-length
Hoy vamos a ver como hacer un contador de caracteres con javascript, el proceso que usamos en esta función también nos sirve para hacer validaciones de cadenas ya que mediante length podemos determinar la longitud de la cadena que estamos procesando.

Este ejemplo tiene un evento que detecta cuando tecleamos y cuenta los caracteres escritos y otro evento que se ejecuta cuando pegamos el texto dentro de la caja que igualmente cuenta los caracteres y los muestra debajo en una capa respuesta.

contador-de-caracteres-javascript
Como podemos ver en la captura de arriba ademas de tener un contador también tenemos un limitador de caracteres totalmente personalizable que nos va indicando cuantos caracteres quedan para llegar al limite previamente establecido desde el código, para cambiar el límite solo tienes que cambiar el valor de la variable total.

El ejemplo:
<script>
	function contarcaracteres(){
		
	       //Numero de caracteres permitidos
               var total=120;

		setTimeout(function(){
		var valor=document.getElementById('contador');
		var respuesta=document.getElementById('res');
		var cantidad=valor.value.length;
		document.getElementById('res').innerHTML = cantidad + ' caractere/s, te quedan ' + (total - cantidad) ;
		if(cantidad>total){
			respuesta.style.color = "red";
		}
		else {
			respuesta.style.color = "black";
		}
		},10);

	}
</script>

<label for="contador">Contador de caracteres:</label>
<textarea name="contador" id="contador" onpaste="contarcaracteres();" onkeyup="contarcaracteres();"></textarea>
<div id="res">0 caractere/s</div>


<style>
	* {
	    font-family: sans-serif;
	}
	textarea {
	    padding: 8px;
	    border: 1px solid #ddd;
	    width: 400px;
	    min-height: 100px;
	}
	label{
		display: block;
		font-weight: bold;
	}
</style>
Demo
Editado
0
Puntos
0
Resp
435
Visitas
Por alber hace 9 meses
Administrador offline

Relaccionados

Para comentar Inicia sesión o Registrate