capturing time(error in chrome)

It is not possible to detect these times using only software.

A keyboard is a device that converts a linear magnitude (the height of the key) into a binary magnitude (the electrical circuit of the key is open or closed).

The keys have a force threshold below which the keystroke is not detected, and above it is. "Professional" (read: expensive) keyboards publish this information as part of their specs, and measure it in grams of pressure (or Newton-centimeters). A typical key operates between 30 and 80 grams of pressure.

When you start pressing a key, you apply zero pressure. After a certain threshold, the key begins its journey , and its height begins to drop. As the milliseconds pass and you apply more force, the key passes the detection threshold, an electrical circuit is closed, and a signal is sent to the computer. But the key continues its journey until it physically hits the bottom of the keyboard.

(And vice versa: as you release pressure, the key backs up past the threshold again, the circuit opens, the key continues to travel until you finally apply zero pressure and lift your finger)

I'm going to copy-paste some graphics from https://deskthority.net/wiki/Force :

A key press is a continuous event in time (duration) and space (key height), but the computer only has a binary view of whether the key is pressed or not .

In the graphs you can see the height of the key as more pressure is applied to it, and the black and white dots determine the thresholds at which the computer interprets that key as being pressed.

When that state changes , the software acts accordingly and fires events keydownand keyupaccordingly. The events keypressare different, as they depend on concepts such as character maps and combination keys.

If the question was...

With an ordinary keyboard, how can I measure the time from when the user's finger comes into contact with the key until the electrical circuit of the key is closed?

...or vice versa...

With a normal keyboard, how can I measure the time that elapses between when the electrical circuit of the key opens and the user's finger stops being in contact with the key?

...then the answer is: you can't .

(Update after reading comments)

One may wonder...

But if you can't, and the computer only has a binary view of whether a key is pressed or not, then why are events generated keypress? Wouldn't it be logical for there to be only keydownand keyup?

Because the keydownand keyupcontain information relative to keys , while the keypresscontain information relative to characters .

For example: When I press the little finger key of my right hand, keydownand are fired , keyupreporting an keycodeorscancode .47

In addition, a is fired keypress, reporting a characterñ .

If you were on a computer with a keyboard set to English, a keydownde would be generated 47, identical, but a keypress different , reporting a character; . (Idem for dvorak, cyrillic, etc etc keyboards)

If I press a modifier key (such as Shift, Ctrl, Altor Bloq May) or a dead key (such as diacritics ´ , `or ¨in Spanish or °, ~or ^in other languages), then the keydownand fire keyup but notkeypress .

For example: if you type ápressing ´and then A, they fire:

• keydownwith keycode 48
• keyupwith keycode 48
• keydownwith keycode 38
• keypresswith personalityá
• keyupwith keycode 38

One can also ask...

But why do I see characters in my events keydownand keycodes in my events keypress?

Because the keyboard event standard for the DOM specifies that events should be fired after the operating system (and system libraries, etc etc) have done the mapping of keycodes to characters, and because implementations are a bloody mess and every browser web does whatever the fuck comes out of it .

One can also ask...

Why do I see a difference when measuring the times when the events keydownand are fired keypress? Shouldn't they fire at exactly the same time?

Because you are not measuring the time in which the keys are pressed, but you are measuring the time in which you are handling each event that has been fired.

If you're programming in JavaScript, you're in an asynchronous but not concurrent environment , so events are handled one after another, but without you knowing when, and there will always be a time difference when the browser changes the scope of the queries. variables, make new function calls, the OS changes the context of processes, etc etc etc.

Your code doesn't run instantly. The browser must do things and perform calculations and run other event handlers from when a is fired keydownto when a keypress.

The goal you are looking for:

Pressure time is from when you start to press until you start to release the key.
Enhancement time is from the start of the release until the end of the release.

Can not be obtained. This is well explained in IvanSanchez's answer .

Instead, we can compute the following values:

Pressure time: The time from when the event is triggered with a key pressed (KeyDown) until the last event that considers it entered (KeyPress) is triggered.
Highlight time : The time from when the last event that considers that a key was entered (KeyPress) is fired until the event that considers that it is not pressed anymore (KeyUp) is fired.

In short, they are not real values , but like all measurements, they can be used to obtain behavioral patterns .

Considerations

1. A key could be held down for a long period, firing successives keypressduring the same key press. In this case, we will only consider the boost time since the last keypress.

   KeyDown   ⬅️ Se comienza a presionar
   KeyPress
   KeyDown
   KeyPress
   KeyDown
   KeyPress  ⬅️ tercera vez que el sistema toma a la tecla como ingresada
   KeyDown
   KeyPress
   KeyDown
   KeyPress  ⬅️ Consideramos fin de presión y realce desde este momento
   KeyUp     ⬅️ Se termina de presionar
   

   However, on MacOS intermediate KeyDown events will not be fired. Linux can behave like Windows or Mac, depending on the platform.

2. Special keys ( Shift, Ctrl, Inicio, etc.) do not generate events keypress. In this case, we can only force an ad-hoc (non-precise) estimate like:

   [tiempo total de presión] / 2

   This calculation is wrong, but we do not have a real event to obtain it. And in these cases, we would be considering equal pressure and enhancement times.

3. The time when each key was started and finished must be saved independently, since the user could press more than one simultaneously. Example:

   KeyDown  "A"   ⬅️ Se comienza a presionar la tecla "A"
   KeyPress "A"
   KeyDown  "B"   ⬅️ Se comienza a presionar la tecla "B"
   KeyPress "B"
   KeyDown  "B"
   KeyPress "B"
   KeyDown  "B"
   KeyPress "B"
   KeyUp    "A"   ⬅️ Se termina de presionar la tecla "A"
   KeyUp    "B"   ⬅️ Se termina de presionar la tecla "B"
   

4. When a key is pressed normally, the event keypressis usually fired almost immediately after keydown, so the pressure becomes almost insignificant, and the highlight will actually be taking values ​​very close to the total press time . Also, when a key is held down during successive character inputs ( aaaaa..), the event keypresswill be very close to keyup, so the relationship is reversed (pressure close to full and highlight negligible).

5. The delay with which each of the events can be triggered also depends on the system load, or the calculation that is being carried out after each event. To reduce the degree of error, it is recommended to try to perform the least amount of processing during typing, postponing the analysis or any other task that consumes resources for a stage after data acquisition.

   For processing that cannot be postponed to a later stage, it is recommended to try to homogenize, trying to perform exactly the same calculation regardless of the key pressed.

6. These are the limitations of JavaScript. Events are fired according to values ​​that depend on many factors, and are often far from the actual moment the keys are pressed. If you wanted to get values ​​with higher precision, you could opt for a lower-level language that doesn't run in a browser. These values ​​are not exact , but can be used, with their own inaccuracy, to estimate patterns in typing dynamics .

7. The keyboards used by common users do not send events at the moment a key is started or stopped, nor at the moment it reaches the maximum of its travel. The KeyDown, KeyPress, and KeyUp events are just interpretations of what the software interprets from key input.

   Also, solutions that work around KeyDown, KeyPress, and KeyUp events are geared towards physical keyboards, and have serious compatibility issues on mobile devices. In many cases, without sending the key codes .

Most reliable times

As just noted, JavaScript is very limited in getting the actual times a key is pressed or released. However, we can consider another variable with a lower degree of uncertainty, in which the measurement error tends not to be significant: the interkey time . This variable can be used more reliably to determine typing patterns.

That is, the time that the user takes between when they stop pressing a key Aand when they start pressing a key Bis usually a better indicator in these cases. In addition, it allows us to increase the casuistry, taking into account that the time A⟶ Bwill not be the same as the time A⟶ C.

So, let's also measure the interkey times:

E⟶ j⟶ e⟶ m⟶ p⟶ l⟶o

where you would expect to have significantly different times for any pair of keys.

Code

var texto       = document.getElementById('captureInput'),
    resultado   = document.getElementById('resultado'),
    teclas      = {}; //acá guardamos tiempo de inicio y fin de cada tecla

texto.addEventListener('keydown', function(keyboardEvent) {
    const timestamp = performance.now(),
          keyName   = keyboardEvent.key,
    	  keyCode   = keyboardEvent.code;
          
    if (!teclas[keyCode]) { //Sólo si no se está manteniendo presionado
    	teclas[keyCode] = {
            down: timestamp,
            key:  keyName
        };
        
        //Mostrar el tiempo intertecla
        if (teclas['Ultima-Tecla'] && keyName) {
            const intertecla = timestamp - teclas['Ultima-Tecla'].up,
                  mensaje    = 'Entre: (' + teclas['Ultima-Tecla'].key
                             + ',' + keyName + ')'
                             + '\tDemora:  ' + intertecla.toPrecision(5) + ' ms';
            mostrarMensaje(mensaje);
        }
    }
});

texto.addEventListener('keypress', function(keyboardEvent) {
    const timestamp = performance.now(),
    	  keyCode   = keyboardEvent.code;

    teclas[keyCode].press = timestamp;
});


texto.addEventListener('keyup', function(keyboardEvent) {
    const timestamp = performance.now(),
          keyCode   = keyboardEvent.code,
          keyName   = teclas[keyCode].key;
    var   presion,
          realce;

    if (teclas[keyCode].press) {
        presion = teclas[keyCode].press - teclas[keyCode].down;
    	realce  = timestamp - teclas[keyCode].press;
        
        //Guardamos el valor de la útlima tecla presionada
        teclas['Ultima-Tecla'] = {
            up:  timestamp,
            key: keyName
        }
    } else { //tecla de control => estimar realce
        presion = (timestamp - teclas[keyCode].down) / 2;
    	realce  = presion;
    }
        
    delete teclas[keyCode]; //Eliminamos la propiedad para que tome el siguiente KeyDown
    
    //Mostrar el mensaje con los tiempos
    var mensaje = 'Tecla ' + keyCode
                + '\tPresión: ' + presion.toPrecision(5) + ' ms'
                + '\tRealce: ' + realce.toPrecision(5) + ' ms';
    mostrarMensaje(mensaje);
});

function mostrarMensaje(mensaje) {
    var res = resultado.innerText.split('\n');
    res.push(mensaje);
    res.splice(0, res.length - 10);
    resultado.innerText = res.join('\n');
    resultado.scrollTop = resultado.scrollHeight - resultado.clientHeight;
}

<input type="text" 
       id="captureInput"
       style="width:100%;">
<pre   id="resultado" 
       style="overflow-y: scroll; height:150px;"></pre>

$(captureInput).keyup(function(event){ //realse
     startUPDOWN= (new Date()).getTime();
     tiempoPresionado = startUPDOWN - startDOWNPress;
...

I came to the conclusion that the following code works. use jquery and pressure times are almost always 0, is it because of the jquery library?

var timeDown;
var timeUp;
var timePress;
var key_cadaTecla= []; //vector para cada tecla e introducirlo en mapCadaTecla
var key_strokes= []; //tiempo de presion
var key_strokes_r= []; //tiempo de realce

var teclaActual;
var id;
var time;
var teclas={};
var keyName;



    $(function () {
        var captureInput = $('.clickme');
        $(captureInput).focus();

            $(captureInput).keydown(function(event){ //inicio de presion
                var timeDown = (new Date()).getTime();
                var keyName=event.keyCode;
                if (!teclas[keyName]) { //Sólo si no se está manteniendo presionado
                    teclas[keyName] = {down: timeDown};
                }                     
            });

            $(captureInput).keypress(function(event){ //mantener apretado
                timePress = (new Date()).getTime();
                var keyName   = event.keyCode;
                // teclas[keyName] = {press: timePress};
                // alert(teclas[keyName].press);

            }); 

            $(captureInput).keyup(function(event){ //dejar de apretar
                var timeUp= (new Date()).getTime();
                var keyName = event.keyCode;
                var presion     = timeUp - teclas[keyName].down;
                var   realce;

                realce=timeUp-timePress;
                var tpresion=presion-realce;
                delete teclas[keyName]; //Eliminamos la propiedad para que tome el siguiente KeyDown


//Mostrar el mensaje con los tiempos
var   mensaje   = 'Tecla "' + keyName 
                + '"\tPresión: ' + tpresion.toPrecision(15) + ' ms'
                + '\tRealce: ' + realce.toPrecision(15) + ' ms';

resultado.innerText += mensaje + '\n';
resultado.scrollTop = resultado.scrollHeight - resultado.clientHeight;

            }); 
    });