8

¿Cuál sería el tiempo cuando se presiona?

$(captureInput).keydown(function(event){ 
                startDOWNPress = (new Date()).getTime();
.
. //Codigo no util para el ejemplo
.
$(captureInput).keypress(function(event){ 
                startPressUP = (new Date()).getTime();
.
.//Codigo no util para el ejemplo
.
$(captureInput).keyup(function(event){ 
                startUPDOWN= (new Date()).getTime();

Lo que estoy haciendo es obtener el tiempo de apretado, para eso obtengo el tiempo desde que es apretada (keyDown) hasta que es inicial levantada (keyup).

¿Cómo hago el tiempo de realce?

Tiempo de realce es desde que inicio de soltar hasta que termino de soltar.

edit:

Tiempo de presión: El tiempo desde que se detecta una tecla como presionada (KeyDown) hasta que se detecta que no se presiona más (KeyUp).

Tiempo de realce: El tiempo desde la última vez que se considera que una tecla fue ingresada (KeyPress) hasta que se detecta que no se presiona más (KeyUp).

7
  • Lo que quieres es medir el tiempo total de una tecla presionada? Commented el 20 oct. 2016 a las 10:17
  • @aldanux quiero obtener el total del tiempo presionada pero en 2 partes, tiempo de presion y tiempo de realce
    – hubman
    Commented el 17 nov. 2016 a las 16:29
  • Para lo que quieres hacer necesitas un teclado de estos kadima.com.br/img/teclado_Ion_meio1.jpg que si permiten medir la fuerza ejercida y el recorrido de las teclas. Commented el 18 nov. 2016 a las 9:58
  • @rnd puedes revisar la respuesta de mariano?
    – hubman
    Commented el 18 nov. 2016 a las 20:34
  • @rn3w la habia visto, es un truco interesante pero no es deterministico. Igual lo de la imagen era una broma XD Commented el 18 nov. 2016 a las 21:11

4 respuestas 4

17

No es posible detectar estos tiempos usando únicamente software.

Un teclado es un dispositivo que convierte una magnitud lineal (la altura de la tecla) en una magnitud binaria (el circuito eléctrico de la tecla está abierto o cerrado).

Las teclas tienen un umbral de fuerza por debajo del cual no se detecta la pulsación, y por encima sí. Los teclados "profesionales" (léase: caras) publican esta información como parte de las especificaciones, y la miden en gramos de presión (o Newton-centímetros). Una tecla típico opera entre 30 y 80 gramos de presión.

Cuando empiezas a pulsar una tecla, aplicas cero presión. Pasado un determinado umbral, la tecla comienza su recorrido, y su altura empieza a bajar. Según pasan los milisegundos y aplicas más fuerza, la tecla sobrepasa el umbral de detección, se cierra un circuito eléctrico, y se envía una señal al ordenador. Pero la tecla continúa su recorrido hasta que choca físicamente con el fondo del teclado.

(Y viceversa: según relajas la presión, la tecla retrocede hasta rebasar de nuevo el umbral, el circuito se abre, la tecla continúa el recorrido hasta que finalmente aplicas cero presión y levantas el dedo)

Voy a copy-pastear unos gráficos de https://deskthority.net/wiki/Force :

recorrido de una tecla Cherry black recorrido de una tecla Cherry ML

Una pulsación de una tecla es un evento contínuo en el tiempo (duración) y en el espacio (altura de la tecla), pero el ordenador sólo tiene una visión binaria de si la tecla está pulsada o no.

En los gráficos puedes ver la altura de la tecla según se le aplica más presión, y los puntos negro y blanco determinan los umbrales en los cuales el ordenador interpreta que esa tecla está presionada.

Cuando ese estado cambia, el software actúa en consecuencia y dispara eventos keydown y keyup en consecuencia. Los eventos keypress son distintos, pues dependen de conceptos como mapas de caracteres y teclas de combinación.

Si la pregunta fuera...

Con un teclado normal y corriente, ¿Cómo puedo medir el tiempo que transcurre desde que el dedo del usuario entra en contacto con la tecla hasta que el circuito eléctrico de la tecla se cierra?

...o viceversa...

Con un teclado normal y corriente, ¿Cómo puedo medir el tiempo que transcurre desde que el circuito eléctrico de la tecla se abre hasta el dedo del usuario deja de estar en contacto con la tecla?

...entonces la respuesta es: no se puede.


(Actualización tras leer los comentarios)

Uno se puede preguntar...

Pero si no se puede, y el ordenador sólo tiene una visión binaria de si una tecla está pulsada o no, ¿entonces porqué se generan eventos keypress? ¿No sería lógico que existieran únicamente keydown y keyup?

Porque los keydown y keyup contienen información relativa a teclas, mientras que los keypress contienen información relativa a caracteres.

Por ejemplo: Cuando yo pulso la tecla del dedo meñique de mi mano derecha, se disparan keydown y keyup, informando de un keycode o scancode de 47.

Además, se dispara un keypress, informando de un caracter ñ.

Si estuviera en un ordenador con un teclado configurado en inglés, se generaría un keydown de 47, idéntico, pero un keypress diferente, informando de un caracter ;. (Ídem para teclados dvorak, cirílicos, etc etc)

Si pulso una tecla modificadora (como Shift, Ctrl, Alt o Bloq May) o una tecla muerta (como las de los símbolos diacríticos ´, ` o ¨ en español o °, ~ o ^ en otros idiomas), entonces se disparan keydown y keyup pero no keypress.

Por ejemplo: si escribes á pulsando ´ y después A, se disparan:

  • keydown con keycode 48
  • keyup con keycode 48
  • keydown con keycode 38
  • keypress con carácter á
  • keyup con keycode 38

Uno también se puede preguntar...

¿Pero por qué veo caracteres en mis eventos keydown y keycodes en mis eventos keypress?

Porque el estándar de eventos de teclado para DOM especifica que los eventos deben dispararse después de que el sistema operativo (y librerías del sistema, etc etc) hayan realizado el mapeo de keycodes a caracteres, y porque las implementaciones son un puñetero lío y cada navegador web hace lo que le sale de los coj*****s.

Uno también se puede preguntar...

¿Porqué veo una diferencia al medir los tiempos en los que se disparan los eventos keydown y keypress? ¿No deberían dispararse exactamente al mismo tiempo?

Porque no estás midiendo el tiempo en el que se pulsan las teclas, sino que estás midiendo el tiempo en el que estás gestionando cada evento que se ha disparado.

Si estás programando en JavaScript, estás en un entorno asíncrono pero no concurrente, por lo que los eventos se gestionan uno detrás de otro, pero sin que tú puedas saber cuándo, y siempre habrá una diferencia de tiempos cuando el navegador cambie el ámbito de las variables, haga nuevas llamadas a funciones, el SO cambie el contexto de los procesos, etc etc etc.

Tu código no se ejecuta instantáneamente. El navegador debe hacer cosas y realizar cálculos y ejecutar otros manejadores de eventos desde que se dispara un keydown hasta que se dispara un keypress.

7
  • hasta el momento estuve obteniendo de la siguiente forma: el tiempo de presion: tiempoKeyUp - tiempoKeyPress, y el tiempo de realse tiempoKeyDown - tiempoKeyPress;
    – hubman
    Commented el 17 nov. 2016 a las 19:12
  • 2
    No. Los keypress son eventos sintéticos, que se disparan cuando una pulsación de una tecla genera un carácter. Esto viene explicado en la referencia de KeyboardEvent en MDN Commented el 17 nov. 2016 a las 20:36
  • cuando se presiona una tecla ocurre lo siguiente y en orden: Key KeyDown KeyPress KeyUp
    – hubman
    Commented el 17 nov. 2016 a las 23:42
  • no dije que solo utilizaria software, por supuesto que usare un teclado!!!
    – hubman
    Commented el 17 nov. 2016 a las 23:49
  • Esta respuesta es exacta. Si el teclado que se usa no envía señales analógicas, es imposible saber lo que se pregunta. Ni el tiempo de presión ni el tiempo de realce, ni nada parecido.
    – Trauma
    Commented el 18 nov. 2016 a las 6:42
9
+150

El objetivo que estás buscando:

Tiempo de presión es desde que inicio a apretar hasta que inicio de soltar la tecla.
Tiempo de realce es desde que inicio de soltar hasta que termino de soltar.

No se puede obtener. Esto está bien explicado en la respuesta de IvanSanchez.

En cambio, podemos calcular los siguientes valores:

Tiempo de presión: El tiempo desde que se disparara el evento con una tecla presionada (KeyDown) hasta que se dispara el último evento que la considera como ingresada (KeyPress).
Tiempo de realce: El tiempo desde que se dispara el último evento que considera que una tecla fue ingresada (KeyPress) hasta que se dispara el evento que considera que no se presiona más (KeyUp).


En definitiva, no son valores reales, pero como toda medición, pueden ser utilizados para obtener patrones comportamentales.


Consideraciones

  1. Una tecla podría estar presionada durante un largo período, disparando sucesivos keypress durante la misma presión de la tecla. En este caso, sólo consideraremos el tiempo de realce desde el último 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
    

    Sin embargo, en MacOS no se dispararán los eventos KeyDown intermedios. Linux puede comportarse como Windows o como Mac, dependiendo de la plataforma.

  2. Las teclas especiales (Shift, Ctrl, Inicio, etc.) no generan eventos keypress. En este caso, sólo podemos forzar una estimación ad-hoc (no precisa) como:

    [tiempo total de presión] / 2

    Este cálculo es erróneo, pero no contamos con un evento real para obtenerlo. Y en estos casos, estaríamos considerando un tiempo de presión y de realce iguales.

  3. Se debe guardar el momento en que se comenzó y se terminó de presionar cada tecla independientemente, ya que el usuario podría presionar más de una simultáneamente. Ejemplo:

    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. Cuando se presiona una tecla normalmente, el evento keypress suele dispararse casi inmediatamente después de keydown, por lo que la presión pasa a tomar valores casi insignificantes, y el realce en realidad estará tomando valores muy cercanos al tiempo total de presión. Además, cuando se mantiene presionada una tecla durante sucesivos ingresos de caracteres (aaaaa..), el evento keypress estará muy cercano a keyup, por lo que se invierte la relación (presión cercana al total y realce insignificante).

  5. La demora con la que pueden dispararse cada uno de los eventos, también depende de la carga del sistema, o del cálculo que se esté realizando luego de cada evento. Lo recomendable para disminuir el grado de error, es intentar realizar la menor cantidad de procesamiento durante el tecleo, postergando el análisis o cualquier otra tarea que consuma recursos para una etapa posterior a la adquisición de datos.

    Para el procesamiento que no se pueda postergar a una etapa posterior, se recomienda tratar de homogeneizar, buscando realizar exactamente el mismo cálculo independientemente de la tecla presionada.

  6. Estas son las limitaciones de JavaScript. Los eventos se disparan de acuerdo a valores que dependen de muchos factores, y suelen alejarse del momento real en el que se presionan las teclas. Si se quisieran obtener valores con una mayor precisión, se podría optar por un lenguaje de más bajo nivel que no se ejecute en un navegador. Estos valores no son exactos, pero pueden ser utilizados, con su propia inexactitud, para estimar patrones en la dinámica de tecleo.

  7. Los teclados utilizados por el común de los usuarios no envían eventos en el momento en el que se comienza o se deja de presionar una tecla, ni en el intante en que llega al máximo del recorrido. Los eventos KeyDown, KeyPress y KeyUp son meras interpretaciones de lo que el software interpreta del ingreso de teclas.

    Además, las soluciones que funcionan alrededor de eventos KeyDown, KeyPress y KeyUp están orientadas a teclados físicos, y tienen serios problemas de compatibilidad en dispositivos móviles. En muchos casos, sin enviar los códigos de teclas.


Tiempos más confiables

Como se remarcó recién, JavaScript se encuentra muy limitado para obtener los tiempos reales en los que una tecla se presiona o se deja de presionar. No obstante, podemos considerar otra variable con un menor grado de incerteza, en el que el error en la medición tiende a no ser significativo: el tiempo interteclas. Esta variable puede ser utilizada con mayor confiabilidad para determinar patrones de tecleo.

Es decir, el tiempo que el usuario tarda entre que deja de presionar una tecla A hasta que comienza a presionar una tecla B suele ser un mejor indicador en estos casos. Además, nos permite aumentar la casuística, teniendo en cuenta que el tiempo AB no será el mismo que el tiempo AC.

Entonces, también vamos a medir los tiempos intertecla:

Ejemplo

donde se esperaría tener tiempos con diferencias significativas para cualquier par de teclas.



Código

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>

5
  • No recomendaría usar jQuery para estos casos. No veo grandes problemas de incompatibilidad que lo ameriten. La mayor restricción debería ser addEventListener, y es soportado desde IE9
    – Mariano
    Commented el 19 nov. 2016 a las 17:53
  • @rn3w No depende del tiempo, sino de cuánto procesamiento haya en cada evento (explicado ahora en el punto 5). Modifiqué el código para que sólo se muestren las últimas 10 líneas de texto, y así obtener tiempos estables.
    – Mariano
    Commented el 20 nov. 2016 a las 22:27
  • creo que es por los eventos que se activan asincronamente
    – hubman
    Commented el 7 mar. 2017 a las 14:37
  • @humbam La línea Entre: (a,b) muestra el tiempo desde la última tecla levantada (keyup) y la recién presionada (keydown). Sin embargo, la forma en que tipeamos normalmente no es ordenada. Siempre solapamos tecleos. En el caso que estás mencionando sucedió lo siguiente (y está bien, según creo el resultado): 1 down "c" 2 up "c" 3 down "o" 4 up "o" 5 down "m" 6 [down "o"]!!!! 7 up "m" 8 up "o"
    – Mariano
    Commented el 7 mar. 2017 a las 15:31
  • Lo siento, pero no veo esto como la respuesta correcta. Simplemente como comenta el compañero. Es imposible. Commented el 14 ago. 2018 a las 18:48
3
$(captureInput).keyup(function(event){ //realse
     startUPDOWN= (new Date()).getTime();
     tiempoPresionado = startUPDOWN - startDOWNPress;
...
4
  • y el tiempo de realce?
    – hubman
    Commented el 21 oct. 2016 a las 15:21
  • @rn3w podrías explicar qué significa tiempo de realce. Para mi esta respuesta parece correcta.
    – learnercys
    Commented el 21 oct. 2016 a las 16:03
  • @emilioPlatzer existe keydown, keypress, y keyup, como seria hacer el tiempo de realce y el tiempo de presion,?
    – hubman
    Commented el 17 nov. 2016 a las 16:23
  • ¿Cómo se define tiempo de realce y tiempo de presión? lo que calculé en la variable tiempoPresionado es el tiempo (en milisegundos) que transcurren entre que el usuario presionó la tecla y levantó el dedo de la tecla. (o para ser más preciso desde el momento en que el navegador se enteró que el usuario presionó la tecla y que se enteró de que el usuario la levantó; también podrían usarse los tiempos en que se generó el evento, pero no debería haber mucha diferencia salvo que la máquina sea muy lenta en cuyo caso tampoco hay precisión se elija lo que se elija). Commented el 17 nov. 2016 a las 21:02
3

Llegué a la conclusión de que el siguiente código funciona. use Jquery y los tiempos de presion son casi siempre 0, sera por la libreria jquery?

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;

            }); 
    });
3
  • @Awes0meM4n estoy equivocado y confundido
    – hubman
    Commented el 18 nov. 2016 a las 12:57
  • Perfila tu código. Como he señalado en mi respuesta, tu código no se ejecuta instantáneamente, y las diferencias que observas es el tiempo que tardas en gestionar los eventos. JQuery añade varias capas de indirección por encima del manejo de eventos del navegador (como 4 o 5 llamadas a función por cada manejo de cada evento), lo cual acaba afectando el rendimiento. Commented el 19 nov. 2016 a las 0:06
  • @IvanSanchez me serviria mucho alguna informacion donde refutar esto: como 4 o 5 llamadas a función por cada manejo de cada evento)
    – hubman
    Commented el 7 mar. 2017 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.