Contador de caracteres en JavaScript

Javascript

Si necesitamos contar los caracteres de un texto o documento siempre podremos utilizar un servicio online gratuíto, pero en este caso vamos a crear un contador de caracteres desde cero utilizando Javascript y Html.

Contador de caracteres en Javascript

El código es realmente simple. Tenemos un elemento textarea en el que el usuario podrá insertar o pegar un contenido y de forma automática, se mostrará por pantalla el total de caracteres, incluyendo números, letras, caracteres y espacios en blanco.

Si lo necesitamos, podría adaptarse para contar sólo números o letras.

Hemos creado una función count() que recogerá el valor del textarea y contará el número de caracteres utilizando la propiedad length.

El código

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Contador de caracteres</title>
</head>
<body>	
	<textarea id="content" placeholder="Inserte caracteres"></textarea>
	<p>Número de caracteres: <span id="counter"></span></p>

	<script type="text/javascript">
		function count(){
			document.getElementById("counter").textContent = document.getElementById("content").value.length;
		}
		
		document.getElementById("content").addEventListener("input", count);
	</script>
</body>
</html>

Vista previa

Esta sería la vista previa del código que mostramos anteriormente. No hemos empleado tiempo en darle estilos CSS, clases ni ninguna clase de florituras ya que intentamos centrarnos exclusivamente en la parte funcional.

Contador de caracteres en Javascript + Html

Más información sobre esta propiedad en https://www.w3schools.com/jsref/jsref_length_string.asp

Escribe una respuesta