$(elm).t([content,]{

delay:0,
//start delay (s)
speed:50,
//typing speed (ms)
|_ 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)

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('pause'[,true/false])
|_ shorthand: $(elm).p([true/false])


$(elm).t('beep')
|_ shorthand: $(elm).b()
/*Methods:
▶ adds content
to elm

▶ pauses typing (toggles if 2nd param omitted)

▶ manual beepin' (initialised/not-typing)*/


$(elm).data().t
$(elm).data().is_typing
$(elm).data().paused
/*Data/properties:
▶ TRUE if initialised
▶ TRUE if typing
▶ TRUE if 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','<br/>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> and <kbd> (arrow_forwardHypertyping Markup Language) Unlike other typewriter scripts, t.js provides an easy, tag-based solution to perform basic editing ops undo 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 settingsrepeating) --- Note: Except <s> and <ins>, <del> doesn't handle nested HTML (kicked out) watch_later 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 <u>content</u></ins> here. |_ non-numeric filled <ins>: inserts content instantly keyboard Mistyping *html* <kbd>typing errors here</kbd> |_ will apply setting's settingsmistype rate (if settingsmistype is defined, though no <kbd> occurrence, mistyping extends to entire typing content - in reverse, settingsmistype will be set to 10) Hints / Tips * Unset default styles with CSS: *css* ins,del,s{text-decoration:none;} kbd{font-family:inherit;} * 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> * Event handlers: Use jQuery's .on to have event handlers (re)attached: *js* $(document).on('click','#typing-elm #child_elm', function(){console.log('clicked!');}); * settingspause_on_click and clickable child elms: To retain typing acitivity with activated settingspause_on_click when clicking specific child elms, just add data-click="1" attribute to 'em * To pause typing on inactive window/tab, just include: *js* $(window).on('blur focus',function(e){ if($(elm).data().is_typing)$(elm).p((e.type=='blur')?true:false);});
  • (Also, see demo.htm)
  • ######<ins><span id="pow-txt" style="display:none;color:tomato;">---[POW!]</span></ins> ##<del>\<ins>1.5</ins></del><del id="pow-trigger">|</del>\
  • //Pow! $('#demo').t({ beep:true, caret:'<span style="color:hotpink;">•</span>', 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><span style="color:skyblue;">WEATHER(R)</span></ins> <ins>Connecting</ins>.<ins>2</ins>... <ins id="__caret"><span style="color:blue">∙∙∙</span><span style="color:gold">•Sunny</span>, 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(); } });
  • <span id="s_bar" style="display:block;height:20px;width:0;background-image:linear-gradient(90deg,yellow,gold);"></span> <a href="https://en.wikipedia.org/wiki/Rick_Rubin" target="_blank">Rick Rubin</a> is an American record producer and former co-president of <a href="https://en.wikipedia.org/wiki/Columbia_Records" target="_blank">Columbia Records</a>. <ins>.5</ins><ins><span style="color:gold;">$</span> Loading "RickRubinSept09.jpg"</ins><ins>2</ins> <span id="rr-100" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/4/43/RickRubinSept09.jpg);background-size:cover;display:inline-block;height:0;width:100px;"></span>
  • //RickRubin™ $('#rr-100').css({height:0}); $('#demo').t({ speed:20, typing:function(elm,chr,left,total){ $('#s_bar').css({width:(left*100)/total}); if(chr.match('rr\-100')){ $(elm).p(); //pause $(elm).find('.t-caret').hide(); pi=setInterval(function(){ (i=$(elm).find('#rr-100')).css({height:'+=10'}); if(i.height()==100){ $(elm).find('.t-caret').show(); $(elm).p();clearInterval(pi); }},4e2,elm,i); } } });
  • //simple tickr var tickr=[ 'Hello world.', '<em>Did you know?</em> <a target="_blank" href="https://mntn-dev.github.io/z.js/">z.js</a> is FTW!1', 'Foo, <strong><u><em><del style="color:yellow;">foo</del>moo</em></u></strong>, foo.' ]; $('#demo').t( tickr.join(x='<ins>2</ins><del>*</del>')+x, {speed:20,repeat:true,pause_on_click:true} );

t.k1js (v1.1/Mar 3, 2018)

A lightweight (~2.9MB1.5KB gzipped+minified) $.Typewriter script with nice features,
star'ed loop times at ▶Github. ©2014-2018 — Mntn® <https://mn.tn/>1 c/o Benjamin Lips <g--[AT]--mn.tn>1 *MIT-Licensed <https://mit-license.org/>1 descriptiont.min.js descriptiont.js archivezip bundle t.js fully supports HTML, yet provides special features to some tags (arrow_forwardHypertyping Markup Language), like: 1.5keyboard mistyping (<kbd>) undo deltng1.5letinnnnng1yellow,#00fng (<del>) watch_later delaying4 (numeric-filled <ins>) content_paste instant.5 inserting (non-numeric <ins>)