jQuery pobiera wartość wejściową po naciśnięciu klawisza

Mam następującą funkcję:

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

Z jakiegoś powodu, przy pierwszym naciśnięciu klawisza, otrzymuję pusty ciąg znaków do dziennika konsoli.

Dzieje się tak, ponieważ keypresszdarzenia są uruchamiane przed dodaniem nowego znaku do valueelementu (więc pierwsze keypresszdarzenie jest uruchamiane przed dodaniem pierwszego znaku, podczas gdy znak valuejest nadal pusty). Zamiast tego powinieneś użyć keyup, który jest uruchamiany po dodaniu postaci.

Zauważ, że jeśli twój element #dSuggestjest taki sam, jak input:text[name=dSuggest]możesz, możesz znacznie uprościć ten kod (a jeśli tak nie jest, posiadanie elementu o takiej samej nazwie jak idinny element nie jest dobrym pomysłem).

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

Zdając sobie sprawę, że jest to dość stary post, i tak udzielę odpowiedzi, ponieważ zmagałem się z tym samym problemem.

Zamiast tego należy użyć "input"zdarzenia i zarejestrować się przy użyciu .onmetody. Jest to szybkie - bez opóźnień keyupi rozwiązuje brakujący ostatni problem związany z naciśnięciem klawisza, który opisujesz.

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

Demo tutaj

Użyj .keyupzamiast naciśnięcia klawisza.

Użyj $(this).val()lub po prostu, this.valueaby uzyskać dostęp do bieżącej wartości wejściowej.

DEMO tutaj

Informacje o .keypressz jQuery Docs,

Zdarzenie keypress jest wysyłane do elementu, gdy przeglądarka zarejestruje wejście klawiatury. Jest to podobne do zdarzenia keydown, z wyjątkiem przypadku powtórzeń klucza. Jeśli użytkownik naciśnie i przytrzyma klawisz, zdarzenie keydown jest wyzwalane raz, ale oddzielne zdarzenia naciśnięcia klawisza są wyzwalane dla każdego wstawionego znaku. Ponadto klawisze modyfikujące (takie jak Shift) wywołują zdarzenia keydown, ale nie zdarzenia keypress.

Musisz przerwać wątek wykonawczy, aby umożliwić aktualizację danych wejściowych.

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

Dzieje się tak, ponieważ Keypresszdarzenie jest uruchamiane przed dodaniem nowej postaci. Zamiast tego użyj zdarzenia „keyup”, które będzie działać idealnie w Twojej sytuacji.

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

Chcę do tego dodać, jeśli masz wiele pól tekstowych i musisz zrobić to samo na ich zdarzeniu keyup, możesz po prostu nadać im wspólną klasę css (np. Commoncss) i zastosować takie zdarzenie keyup.

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

znacznie zmniejszy to ilość kodu, ponieważ nie musisz stosować zdarzenia keyup według identyfikatora dla każdego pola tekstowego.

Szukałem przykładu ES6 (aby mógł przejść przez mój linter) Więc dla innych osób, które szukają tego samego:

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

Użyłbym również keyup, ponieważ otrzymujesz bieżącą wartość, która jest wypełniona.

Po prostu użyj limitu czasu, aby wykonać połączenie; limit czasu zostanie wywołany po zakończeniu stosu zdarzeń (tj. po wywołaniu domyślnego zdarzenia)

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

Myślę, że potrzebujesz poniższego prototypu

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

jQuery pobiera wartość wejściową po naciśnięciu klawisza

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>