• Stars
    star
    183
  • Rank 210,154 (Top 5 %)
  • Language
    CoffeeScript
  • Created over 10 years ago
  • Updated almost 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

human typing with jQuery

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.