🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

Screencast

typetype

typetype is a jQuery plugin that simulates a human typing.

Usage

Include jQuery and jquery.typetype.min.js (just 517 bytes gzipped).

You can then append some text to textareas, inputs or other HTML elements.

$('textarea').typetype('Some text that you want to demo')

Customize the typing

$('textarea').typetype(   'Text to append',   {     e: 0.04, // error rate. (use e=0 for perfect typing)     t: 100, // interval between keypresses     keypress: function (){       // called after every keypress (this may be an erroneous keypress!)     },     callback: function (){       // the `this` keyword is bound to the particular element.     }   } )

backspace jQuery plugin

Similarly, you can backspace text from an element in a believable way.

$('textarea').backspace(   14, // number of chars to backspace   {     t: 100, // interval between keypresses     keypress: function (){ },     callback: function (){ }   } )

Combined with jQuery animations

Both plugins can be chained to make very readable, sequential jQuery:

$('textarea')   .typetype('Hello, world!')   .delay(1000)   .typetype('\n\nGoodbye.')   .backspace(25)   .fadeOut() // regular jQuery effects queue up nicely

Inspired by

@dmotz's delightful TuringType. I was also inspired by Daniel LeCheminant's StackOverflow in 4096 bytes.

I challenge anyone to make a smaller gzipped version! (make gz was useful)

License

This project is licensed under the MIT license.


You May Also Like