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.