JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$('input:not([type=password]), textarea, select').on('focus', function() {
    new EditingSession($(this));
});

/** 
 * Represents the period of during which when the user is focused on
 * the input.
 */
function EditingSession(input){
    
    var firstKeydownTime = null;
    var lastKeydownTime = null;
    var sessionId = makeRandomId();
    
    input.on("keydown." + sessionId, function(){
        // User typed something
        var time = performance.now();
        lastKeydownTime = time;
        if(firstKeydownTime === null){
            firstKeydownTime = time;
        }
    });
             
    input.on("blur." + sessionId, function(){
        // Editing session finished.
        
        // Detach all handlers
        input.off("." + sessionId);
        
        // Print time between first and last keydown
        var time;
        if(firstKeydownTime === null){
            time = 0;
        } else {
            time = lastKeydownTime - firstKeydownTime;
        }
        $('#console').append(input.attr('name') + ' took ' + time + ' ms.' + "<br/>");
    });
             
}

// Borrowed from http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript    
function makeRandomId() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}