jQuery, tuşa basıldıktan sonra giriş değerini alır

Aşağıdaki işleve sahibim:

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

Bazı nedenlerden dolayı, ilk tuşa basıldığında, konsol günlüğüne boş bir dize alıyorum.

Bunun nedeni, keypressolayların öğeye yeni karakter eklenmeden önce tetiklenmesidir value(bu nedenle ilk keypressolay, ilk karakter eklenmeden önce value, henüz boşken başlatılır ). Bunun keyupyerine, karakter eklendikten sonra ateşlenecek olanı kullanmalısınız .

Öğenizle #dSuggestaynıysa, input:text[name=dSuggest]bu kodu önemli ölçüde basitleştirebileceğinizi unutmayın (ve değilse, adı idbaşka bir öğeninkiyle aynı olan bir öğeye sahip olmak iyi bir fikir değildir).

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

Bunun oldukça eski bir gönderi olduğunun farkına vardığımda, yine de aynı sorunla mücadele ederken bir cevap vereceğim.

Bunun "input"yerine etkinliği kullanmalı ve .onyöntemle kayıt olmalısınız . Bu hızlıdır - gecikmeden keyupve tanımladığınız en son eksik tuş basma problemini çözer.

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

Demo burada

.keyupTuşa basmak yerine kullanın .

Ayrıca mevcut giriş değerine erişmek için $(this).val()veya tuşunu kullanın this.value.

DEMO burada

.keypressJQuery belgelerinden bilgi ,

Tuşa basma olayı, tarayıcı klavye girişini kaydettiğinde bir öğeye gönderilir. Bu, tuş tekrarları dışında, keydown olayına benzer. Kullanıcı bir tuşa basar ve basılı tutarsa, bir tuş basma olayı tetiklenir, ancak eklenen her karakter için ayrı tuşa basma olayları tetiklenir. Ek olarak, değiştirici tuşlar (Shift gibi) tuş basma olaylarını tetikler ancak tuşa basma olaylarını tetiklemez.

Girişin güncellenmesine izin vermek için yürütme iş parçacığını kesmeniz gerekir.

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

Bunun nedeni Keypress, yeni karakter eklenmeden önce olayın tetiklenmesidir. Bunun yerine, sizin durumunuzda mükemmel şekilde çalışacak 'keyup' olayını kullanın.

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

Buna eklemek istiyorum, eğer çok sayıda metin kutunuz varsa ve aynı şeyi onların keyup olayında yapmak zorundaysanız, onlara sadece ortak bir css sınıfı (örn. Commoncss) verebilir ve bunun gibi keyup olayını uygulayabilirsiniz.

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

Bu, her metin kutusu için keyup olayını id'ye göre uygulamanız gerekmediğinden, kodunuzu büyük ölçüde azaltacaktır.

Bir ES6 örneği arıyordum (böylece linterimi geçebilirdi) Yani aynı şeyi arayan diğer insanlar için:

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

Ayrıca, doldurulan mevcut değeri aldığınız için keyup'ı da kullanırdım.

Aramanızı yapmak için sadece bir zaman aşımı kullanın; zaman aşımı olay yığını tamamlandığında çağrılacaktır (yani varsayılan olay çağrıldıktan sonra)

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

Sanırım ihtiyacınız olan şey aşağıdaki prototip

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

jQuery, tuşa basıldıktan sonra giriş değerini alır

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>