JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<input type="text" name="" id="">
    <div id="total"></div>
<div id="console"></div>

JavaScript

$('input:not([type=password]), textarea, select').on('input change keyup', function(event) {
	if(event.type=='input'){
      $('#console').append( "input: " + $(this).val() + "<br/>" ); 
    }
    if(event.type=='change'){
      $('#console').append( "change: " + $(this).val() + "<br/>" ); 
    }
});

var a, b, total = 0;
$('input:not([type=password]), textarea, select').on('keydown', function(event) {
	a = performance.now();
});
$('input:not([type=password]), textarea, select').on('keyup', function(event) {
	b = performance.now();
    var net = (b - a);
	$('#console').append( $(this).attr('name') + ' took ' + net + ' ms.' + "<br/>");
    var final = total += net;
    $('#total').text('Total time typing: ' + final + ' ms.');
});