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:
JavaScript String charAt() Method
JavaScript String length Property
JavaScript String substr() Method
Fuente: linuxito
