jQuery obtener valor de entrada después de pulsación de tecla

Question

tengo la siguiente función:

$(document).ready(function() { 
    $("#dSuggest").keypress(function() { 
     var dInput = $('input:text[name=dSuggest]').val(); 
     console.log(dInput); 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

Por alguna razón, por primera pulsación de tecla, me estoy poniendo una cadena vacía para el registro de la consola.

Answer 1

Esto se debe a keypress eventos se activan antes se añade el nuevo carácter a la value del elemento (por lo que la primera keypress evento se dispara antes de añadir el primer carácter, mientras que la value sigue vacío). Debería usar keyup en su lugar, que se dispara después de se ha agregado el carácter.

Tenga en cuenta que, si su elemento #dSuggest es la misma que input:text[name=dSuggest] puede simplificar considerablemente el código (y si no lo es, que tiene un elemento con un nombre que es el mismo que el id de otro elemento no es una buena idea).

$('#dSuggest').keypress(function() { 
    var dInput = this.value; 
    console.log(dInput); 
    $(".dDimension:contains('" + dInput + "')").css("display","block"); 
}); 

Answer 2

Use .keyup en lugar de la tecla.

También use $(this).val() o simplemente this.value para acceder al valor de entrada actual.

DEMO aquí

información acerca de los documentos del .keypress jQuery,

El evento de pulsación de tecla se envía a un elemento cuando el navegador registra entrada de teclado. Esto es similar al evento keydown, excepto en el caso de repeticiones de teclas . Si el usuario presiona y mantiene presionada una tecla, se activa una vez el evento con una tecla de tecla, pero se activan eventos de tecla por separado para cada carácter insertado. Además, las teclas modificadoras (como Shift) desencadenan eventos de tecla pero no eventos de pulsación de tecla.

Answer 3

Tiene que interrumpir el hilo de ejecución para permitir que la entrada se actualice.

$(document).ready(function(event) { 
     $("#dSuggest").keypress(function() { 
      //Interrupt the execution thread to allow input to update 
       setTimeout(function() { 
        var dInput = $('input:text[name=dSuggest]').val(); 
        console.log(dInput); 
        $(".dDimension:contains('" + dInput + "')").css("display","block"); 
       }, 0); 
     }); 
    }); 

Answer 4

darse cuenta de que este es un post bastante antiguo, voy a proporcionar una respuesta de todas formas, yo estaba luchando con el mismo problema.

En su lugar, debe utilizar el evento "input" y registrarse con el método .on. Esto es rápido, sin el retraso de keyup y resuelve el problema de tecla que falta más reciente que usted describe.

$('#dSuggest').on("input", function() { 
    var dInput = this.value; 
    console.log(dInput); 
    $(".dDimension:contains('" + dInput + "')").css("display","block"); 
}); 

Demo here

Answer 5

Esto se debe a Keypress evento se dispara antes de añadir el nuevo carácter. Use el evento 'keyup' en su lugar, que funcionará perfectamente en su situación.

$(document).ready(function() { 
    $("#dSuggest").keyup(function() { 
     var dInput = $('input:text[name=dSuggest]').val(); 
     console.log(dInput); 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

quiero añadir a esto, si tiene muchos cuadros de texto y usted tiene que hacer lo mismo en su caso keyup simplemente les puede dar una clase css común (por ejemplo commoncss) y aplicar keyup evento como este .

$(document).ready(function() { 
    $(".commoncss").keyup(function() { 
     //your code 
    }); 
}); 

Esto reducirá en gran medida el código, ya que no tiene que aplicar el evento de tecla por ID para cada cuadro de texto.

Answer 6

Creo que lo que necesita es el siguiente prototipo

$(element).on('input',function(){code}) 

Answer 7

que estaba buscando un ejemplo ES6 (por lo que podría pasar a mi linter) Así que para otras personas que están en busca de la misma:

$('#dSuggest').keyup((e) => { 
    console.log(e.currentTarget.value); 
}); 

también me gustaría usar keyup debido a que obtiene el valor actual que se llena.