En este artículo voy a compartir una pequeña función JavaScript que implementé para simular el tipeo de teclas.



La función toma el ID de un elemento, un texto a escribir, y un retraso expresado en milisegundos, y se encarga de ingresa el texto dentro del elemento (utilizando la propiedad "innerHTML"), de a una letra a la vez, esperando el retraso indicado entre letra y letra. Como resultado simula un texto escrito con teclado o máquina de escribir.

function typewrite(element,text,delay) {

	/*
	
	Simula el tipeo de teclas
	
	element:	elemento donde insertar el texto.
	text:		texto a tipear.
	delay:		tiempo entre teclas (en milisegundos).

	*/

	// Insertar la siguiente letra
	aux = document.getElementById(element).innerHTML;
	aux = aux.concat(text.charAt(0));
	document.getElementById(element).innerHTML = aux;

	// Esperar "delay" milisegundos para la próxima tecla
	if (text.length > 1) {
		// Eliminar la tecla actual
		text = text.substr(1);
		setTimeout(typewrite,delay,element,text,delay);
	}
}

El funcionamiento es muy sencillo. La función toma el primer caracter del texto y lo ingresa en el elemento. Luego lanza un timer (setTimeout) que invoca recursivamente a la función con el siguiente caracter, hasta llegar al último.

Se debe invocar de la siguiente forma:

<span id="texto"></a>

<script>
t="Hola mundo!!";
typewrite("texto",t,100);
</script>

 

Como utiliza la propiedad innerHTML, sólo funciona para escribir dentro de tags <span>, <p>, <pre>, <textarea>, <td>, etc. Si se desea utilizar con un tag <input> será necesario cambiar la propiedad innerHTML por value.

Verificar su funcionamiento:

Texto a tipear
Retraso (milisegundos)

Para más información remitirse a los siguientes enlaces:

HTML DOM innerHTML Property

JavaScript String charAt() Method

JavaScript String length Property

JavaScript String substr() Method

Window setTimeout() Method


Tal vez pueda interesarte


Compartí este artículo