jQuery obtiene el valor de entrada después de la pulsación de tecla

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, para la primera pulsación de tecla, obtengo una cadena vacía en el registro de la consola.

Esto se debe a que los eventos de keypress se disparan antes de que el nuevo carácter se agregue al value del elemento (por lo que el primer evento de keypress se dispara antes de que se agregue el primer carácter, mientras que el value todavía está vacío). Debería usar la keyup en keyup lugar, que se keyup después de que se ha agregado el carácter.

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

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

Al darme cuenta de que esta es una publicación bastante antigua, daré una respuesta de todos modos, ya que estaba luchando con el mismo problema.

En su lugar, debe usar 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 aquí

Use .keyup lugar de .keyup tecla.

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

DEMO aquí

Información sobre .keypress de jQuery documentos,

El evento de pulsación de tecla se envía a un elemento cuando el navegador registra la entrada del 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 desencadena un evento de pulsación una vez, pero se activan eventos de pulsación de tecla separados para cada carácter insertado. Además, las teclas modificadoras (como Shift) activan eventos de pulsación pero no eventos de pulsación de teclas.

Tienes 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); }); }); 

Esto se debe a que el evento Keypress se Keypress antes de que se agregue 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 agregar a esto, si tiene muchos cuadros de texto y tiene que hacer lo mismo en su evento de teclado, simplemente puede darles una clase de CSS común (por ejemplo, commoncss) y aplicar el evento de teclado de esta manera.

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

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

Estaba buscando un ejemplo de ES6 (por lo que podría pasar mi linter) Así que para otras personas que buscan lo mismo:

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

También usaría keyup porque obtienes el valor actual que se completa.

Creo que lo que necesitas es el siguiente prototipo

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