human typing with jQuery
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Makefile
README.md
index.html
jquery.typetype.coffee
jquery.typetype.js
jquery.typetype.min.js
screencast.gif
typetype.jquery.json Bump version before pushing tags Jul 8, 2014

README.md

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.