jQuery ottiene il valore di input dopo la pressione di un tasto

Ho la seguente funzione:

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

Per qualche motivo, per la prima pressione dei tasti, sto ricevendo una stringa vuota nel registro della console.

Questo perché gli keypresseventi vengono attivati prima che il nuovo carattere venga aggiunto a quello valuedell'elemento (quindi il primo keypressevento viene generato prima dell'aggiunta del primo carattere, mentre valueè ancora vuoto). Dovresti keyupinvece usare , che viene lanciato dopo che il personaggio è stato aggiunto.

Nota che, se il tuo elemento #dSuggestè lo stesso input:text[name=dSuggest]puoi semplificare considerevolmente questo codice (e in caso contrario, avere un elemento con un nome uguale a quello iddi un altro elemento non è una buona idea).

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

Rendendosi conto che questo è un post piuttosto vecchio, fornirò comunque una risposta mentre stavo lottando con lo stesso problema.

Dovresti "input"invece utilizzare l' evento e registrarti con il .onmetodo. Questo è veloce - senza il ritardo keyupe risolve l'ultimo problema di pressione dei tasti che descrivi.

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

Demo qui

Utilizzare .keyupinvece di premere il tasto.

Utilizzare anche $(this).val()o solo this.valueper accedere al valore di input corrente.

DEMO qui

Informazioni .keypressdai documenti jQuery,

L'evento keypress viene inviato a un elemento quando il browser registra l'input da tastiera. Questo è simile all'evento keydown, tranne nel caso di ripetizioni dei tasti. Se l'utente preme e tiene premuto un tasto, un evento keydown viene attivato una volta, ma vengono attivati ​​eventi keypress separati per ciascun carattere inserito. Inoltre, i tasti modificatori (come Shift) attivano gli eventi keydown ma non gli eventi keypress.

È necessario interrompere il thread di esecuzione per consentire l'aggiornamento dell'input.

  $(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);
       });
  });

Questo perché l' Keypressevento viene generato prima dell'aggiunta del nuovo personaggio. Usa invece l'evento 'keyup', che funzionerà perfettamente nella tua situazione.

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

Voglio aggiungere a questo, se hai molte caselle di testo e devi fare la stessa cosa nel loro evento keyup puoi semplicemente dare loro una classe css comune (es. Commoncss) e applicare un evento keyup come questo.

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

questo ridurrà notevolmente il codice in quanto non è necessario applicare l'evento keyup in base all'ID per ciascuna casella di testo.

Stavo cercando un esempio ES6 (in modo che potesse passare la mia linter) Quindi per altre persone che stanno cercando lo stesso:

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

Vorrei anche usare il keyup perché ottieni il valore corrente che viene compilato.

Basta usare un timeout per effettuare la chiamata; il timeout verrà chiamato al termine dello stack di eventi (ovvero dopo che viene chiamato l'evento predefinito)

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

Penso che ciò di cui hai bisogno sia il prototipo di seguito

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

jQuery ottiene il valore di input dopo la pressione di un tasto

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>