GitHub release (latest by date) jsDelivr hits (GitHub) GitHub GitHub issues GitHub issues


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



|_ shorthand: $(elm).a(content)

|_ shorthand: $(elm).q(content)

|_ shorthand: $(elm).p([true/false])

|_ shorthand: $(elm).s(ms)

|_ shorthand: $(elm).b()

▶ 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)*/

▶ TRUE if initialised
▶ TRUE subdirectory_arrow_right typing
▶ TRUE subdirectory_arrow_right 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>, <kbd> and <s> (arrow_forwardHypertyping Markup Language) Unlike other typewriter scripts, t.js provides an easy, HTML 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 (dropped) 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) restore 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 settingspause_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!');}); * 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

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><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({ caret:'<span style="color:hotpink;">•</span>', typing:function(elm,chr){ if(chr.match(/\-trigger/)) $('#pow-txt').show().delay(500).fadeOut(0); } });
  • <del>~~~~~~~~~~~~</del> <ins><span style="color:dodgerblue;">Microsoft(R) Windows 98 (C)Copyright Microsoft Corp. 1981-1998</span> <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(); } });
  • //simple tickr var tickr=[ 'Hello world.', '<em>Did you know?</em> <a target="_blank" href="">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} );
  • <ins>speed: <span id="speed">100</span></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('', function(_){ $('#demo_5').q( '~ my ip: <span style="color:cyan;">'+_+'</span>\n' ); } ); job(1000,2); $('#demo_5').q('~ foo\n');

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

A lightweight (~3.4GB1.5KB gzipped+minified) $.Typewriter script with nice features,
star'ed loop times at ▶Github. ©2014-2019 — Mntn® <>1 c/o Benjamin Lips <g--[AT]>1 *MIT-Licensed <>1 descriptiont.min.js descriptiont.js archivezip bundle t.js fully supports HTML to-type-content, yet provides special features for 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>) restore 10changing speed at 200runtime50 (numeric-filled <s>)