0

Tengo una plantilla .jade

extends layoutIn

block content

    input(type="text", id="captureInput", style="width:100%")
    pre(id="resultado", style="overflow-y: scroll; height:150px")

y el javascript es:

var texto       = document.getElementById('captureInput'),
    resultado   = document.getElementById('resultado'),
    teclas      = {}; //acá guardamos tiempo de inicio y fin de cada tecla
alert("1");
texto.addEventListener('keydown', function(keyboardEvent) {
    alert("2");
    const timestamp = performance.now(),
          keyName   = keyboardEvent.key;

    if (!teclas[keyName]) { //Sólo si no se está manteniendo presionado
        teclas[keyName] = {down: timestamp};
    }
});

muestra el primer alert, pero el segundo nunca.

NOTA: El mismo codigo con jquery funciona 100% con el siguiente codigo jquery funciona

$(function () {
            var captureInput = $('#captureInput');
            $(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};
                    }                     
                });

1 respuesta 1

2

Para que funcione en cualquier navegador hay que esperar a que el objeto document esté listo para usar. Tu código javascript hay que meterlo en un evento load:

window.addEventListener('load', function(){
    var texto       = document.getElementById('captureInput'),
        resultado   = document.getElementById('resultado'),
        teclas      = {}; //acá guardamos tiempo de inicio y fin de cada tecla
    alert("1");
    texto.addEventListener('keydown', function(keyboardEvent) {
        alert("2");
        const timestamp = performance.now(),
              keyName   = keyboardEvent.key;

        if (!teclas[keyName]) { //Sólo si no se está manteniendo presionado
            teclas[keyName] = {down: timestamp};
        }
    });
});

El uso de

window.addEventListener('load', function(){

equivale en jQuery a:

$(function () {

y que lo está haciendo es esperar a que el documento esté listo para usarse

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.