jsDelivr hits (GitHub)

$(elm).t([content,]{
delay:0,: //start delay (s)
speed:50,: //typing speed in ms (min: 10)
|_ speed_vary:false,: //'human-like'
beep:false,: //beep while typing (Web Audio API)
mistype:false,: //mistype rate: 1:N per char
|_ locale:'en',: /*keyboard layout (to fit mistype)
supported: 'en' (english) or 'de' (german)*/
caret:true,: /*caret; can be HTML; associated CSS class:
.t-caret; default (TRUE): ▎ (\u258e)*/
|_ blink:true,: /*blink-interval in ms (min: 100); if TRUE,
speed*3*/
|_ blink_perm:false,: /*permanent blinking? if FALSE, caret blinks only on delay/pause/finish*/
repeat:0,: //repeat typing: if TRUE, infinite or N times
tag:'span',: //wrapper tag (.t-container, .t-caret)
pause_on_click:false,: //pauses/continues typing on click/tap (elm)
pause_on_tab_switch :false,: /*pauses typing if window/tab
is inactive (Page Visibility API)*/

init:function(elm){}, typing:function(elm,chr_or_elm,left,total){}, fin:function(elm){}: //Callbacks
});
$(elm).t('add',content) |_ shorthand: $(elm).a(content) $(elm).t('queue',content); |_ shorthand: $(elm).q(content) $(elm).t('pause'[,true/false]) |_ shorthand: $(elm).p([true/false]) $(elm).t('speed',ms) |_ shorthand: $(elm).s(ms) $(elm).t('beep') |_ shorthand: $(elm).b() $(elm).t_off([true]): /*Methods:
▶ adds content
to elm

▶ like 'add', but queued processing (useful for async typing activity)

▶ pauses typing (toggles if 2nd param omitted)

▶ changes typing
speed (ms) at runtime

▶ manual beepin' (initialised/not-typing)

▶ destroys typer's instance (if TRUE, also clears content)*/


$(elm).data().t $(elm).data().is_typing $(elm).data().paused: /*Data/properties:
▶ TRUE if initialised
▶ TRUE typing
▶ TRUE paused*/

Got jQuery and t.js loaded? *js* $(elm).t(); |_ most basic usage; reads elm's .html(), types *js* $(elm).t({speed:30[,...]}); |_ with custom settings *js* $(elm).t('text/html to type'[,{...}]); |_ types given string (2nd param: settings)

Add content / pause typing *js* $(elm).t('add',' new line added.'); alt.: $(elm).a(...); |_ adds content to non-paused/non-typing elm *js* $(elm).t('pause'[,bool]); alt.: $(elm).p([bool]); |_ pauses typing (toggles if TRUE/FALSE omitted)

<del>, <ins>, <kbd> and <s> (Hypertyping Markup Language) Unlike other typewriter scripts, t.js provides an easy, HTML tag-based solution to perform basic editing ops Deleting *html* Hello! <del>Moon</del>Sun is up. |_ deletes 'Moon' (by default, t.js delays 0.25s before removing) *html* Hello! <del>Moon<ins>2</ins></del>Sun is up. |_ custom del-delay: numeric-filled <ins> inside <del> *html* <del>Highlighted text<s>red,white</s></del> |_ text selection: <s> inside <del> (comma seperated background/forground values) *html* <del>*</del> |_ '*' clears everything typed before (still stored in case of repeating) --- Note: Except <s> and <ins>, <del> doesn't handle nested HTML (dropped) Delaying/Inserting *html* Please wait a few seconds..<ins>5.5</ins>Thanks! |_ delays/pauses typing for five and a half second *html* Very <ins>fast delivery of content</ins> here. |_ non-numeric filled <ins>: inserts content instantly Mistyping *html* <kbd>typing errors here</kbd> |_ will apply setting's mistype rate (if mistype is defined, though no <kbd> occurrence, mistyping extends to entire typing content — in reverse, mistype will be set to 10) Speed change *html* Yay! <s>10</s> Fast typing now. |_ sets typing speed to 10ms (numeric-filled <s> tag outside <del>) (or, via method: *js* $(elm).t('speed',ms) resp. *js* $(elm).s(ms))

Hints / tips * Unset default/unwantend styles with CSS:

*css* ins,del{text-decoration:none;}
      kbd{font-family:inherit;}
      s{display:none;}

* To avoid flashing of to-type-content on page load, it's recommended to set elm's style to *css* {visibility:hidden;} or {display:none;} (also, for block elements, it's recommended to set their *css* display property to *css* inline-block to keep caret fitting - if necessary) * To avoid typing activity slow down on browser tab/window switch, just include HackTimer (see Issue #1) into your page (on top of all other scripts):

<script type="text/javascript" src="HackTimer.min.js"></script>
  <script type="text/javascript" src="HackTimerWorker.min.js"></script>

Note: You can also force typing activity to pause by setting pause_on_tab_switch * Event handlers: Use jQuery's .on to have event handlers (re)attached:

*js* $(document).on('click','#typing-elm #child_elm',
function(){console.log('clicked!');});

* pause_on_click and clickable child elms: To retain typing acitivity with activated pause_on_click when clicking specific child elms, just add data-click="1" attribute to 'em

How to? * Stop caret blinking / hide caret at run-time See Issue #5 * Stop beeping at run-time *js* $(elm).data('beep',false);

(Also, see demo.htm / demo2.htm / Pow!)
######<ins>---[POW!]</ins> ##<del>\<ins>1.5</ins></del><del id="pow-trigger">|</del>\
//Pow! $('#demo').t({ caret:'•', typing:function(elm,chr){ if(chr.match(/\-trigger/)) $('#pow-txt').show().delay(500).fadeOut(0); } });
<del>~~~~~~~~~~~~</del> <ins>Microsoft(R) Windows 98 (C)Copyright Microsoft Corp. 1981-1998 <hr/> c:\></ins><ins>2</ins><kbd>cd tools</kbd> <ins>c:\tools></ins><ins>1</ins><kbd>weather.exe -"miami, fl"</kbd> <ins>WEATHER(R)</ins> <ins>Connecting</ins>.<ins>2</ins>... <ins id="__caret">∙∙∙•Sunny, 99 F c:\tools></ins>
//weather.exe $('#demo').t({ mistype:7, pause_on_click:true, typing:function(elm,chr){ if(chr.match(/skyblue/)) elm.find('.t-caret').hide(); else if(chr.match(/__caret/)) elm.find('.t-caret').show(); } });
//simple tickr var tickr=[ 'Hello world.', 'Did you know? <a target="_blank" href="https://mntn-dev.github.io/z.js/">z.js</a> is FTW!1', 'Foo, <del style="color:yellow;">foo</del>moo, foo.' ]; $('#demo').t( tickr.join(x='<ins>2</ins><del>*</del>')+x, {speed:20,repeat:true,pause_on_click:true} );
<ins>speed: 100</ins> qqqqqqqqqq qqqqqqqqqq qqqqqqqqqq qqqqqqqqqq qqqqqqqqqq
//speed change var new_speed=100; $('#demo').t({ speed:100, typing: function(e){ new_speed-=2; e.s(new_speed); $('#speed').text(Math.max(new_speed,10)); } });
//queue example var job=async function(x,y){ $('#demo').q('~ '+(x+y)+'\n'); }; $('#demo_5').t('logging\n~~~~~~\n',{caret:'#'}); $.get('https://api.ipify.org/', function(_){ $('#demo_5').q( '~ my ip: '+_+'\n' ); } ); job(1000,2); $('#demo_5').q('~ foo\n');

t.k1js (v1.5.6/Aug 6, 2019)

A lightweight (~3.4~~GB1.5~~KB gzipped+minified) $.Typewriter script with nice features,
'ed times at ▶Github. ©2014-2019 — Mntn® <https://mn.tn/>1 c/o Benjamin Lips <g--[AT]--mn.tn>1 *MIT-Licensed <https://mit-license.org/>1 t.min.js t.js zip bundle t.js fully supports HTML to-type-content, yet provides special features for some tags (Hypertyping Markup Language), like: 1.5 mistyping (<kbd>) de~~ltng1.5~~leti~~nnnnng1~~yellow,#00f~~~~ng (<del>) delaying4 (numeric-filled <ins>) instant.5 inserting (non-numeric <ins>) 10changing speed at ~~200~~runtime50 (numeric-filled <s>)