jQuery obtiene el valor de entrada después de presionar una 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 keypresseventos se disparan antes de que se agregue el nuevo carácter valueal elemento (por lo que el primer keypressevento se dispara antes de que se agregue el primer carácter, mientras valueque todavía está vacío). En su keyuplugar, debe usar , que se dispara después de que se haya agregado el personaje.

Tenga en cuenta que, si su elemento #dSuggestes el mismo, input:text[name=dSuggest]puede simplificar este código considerablemente (y si no lo es, tener un elemento con un nombre igual al idde 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, proporcionaré una respuesta de todos modos ya que estaba luchando con el mismo problema.

En su "input"lugar, debe usar el evento y registrarse con el .onmétodo. Esto es rápido, sin el retraso keyupy resuelve el último problema de pulsación de tecla que usted describe.

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

Demo aquí

Usar en .keyuplugar de presionar una tecla.

Utilice también $(this).val()o solo this.valuepara acceder al valor de entrada actual.

DEMO aquí

Información sobre .keypressdocumentos de jQuery,

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 activa un evento de pulsación de tecla 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 de tecla pero no eventos de pulsación de tecla.

Debe 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 Keypressevento se dispara antes de agregar el nuevo personaje. Utilice 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 keyup, simplemente puede darles una clase css común (por ejemplo, commoncss) y aplicar un evento keyup como este.

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

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

Estaba buscando un ejemplo de ES6 (por lo que podría pasar mi linter) Entonces, 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.

Simplemente use un tiempo de espera para hacer su llamada; se llamará al tiempo de espera cuando finalice la pila de eventos (es decir, después de que se llame al evento predeterminado)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

Creo que lo que necesitas es el siguiente prototipo

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

jQuery obtiene el valor de entrada después de presionar una tecla

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>