jQuery mendapatkan nilai input setelah tombol ditekan

Saya memiliki fungsi berikut:

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

Untuk beberapa alasan, untuk penekanan tombol pertama, saya mendapatkan string kosong ke log konsol.

Ini karena keypressperistiwa dipecat sebelum karakter baru ditambahkan ke valueelemen (jadi keypressacara pertama dipecat sebelum karakter pertama ditambahkan, sementara valuemasih kosong). Anda sebaiknya menggunakan keyup, yang dipecat setelah karakter ditambahkan.

Perhatikan bahwa, jika elemen Anda #dSuggestsama dengan input:text[name=dSuggest]menyederhanakan kode ini (dan jika tidak, memiliki elemen dengan nama yang sama dengan idelemen lain bukanlah ide yang baik).

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

Menyadari bahwa ini adalah posting yang agak lama, saya tetap akan memberikan jawaban karena saya masih berjuang dengan masalah yang sama.

Anda harus menggunakan "input"acara sebagai gantinya, dan mendaftar dengan .onmetode ini. Ini cepat - tanpa lag keyupdan menyelesaikan masalah penekanan tombol terbaru yang Anda uraikan.

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

Demo di sini

Gunakan .keyupbukan penekanan tombol.

Juga gunakan $(this).val()atau hanya this.valueuntuk mengakses nilai input saat ini.

DEMO di sini

Info tentang .keypressdari jQuery docs,

Acara penekanan tombol dikirim ke elemen ketika browser mendaftarkan input keyboard. Ini mirip dengan acara keydown, kecuali dalam kasus pengulangan kunci. Jika pengguna menekan dan menahan tombol, peristiwa keydown dipicu sekali, tetapi peristiwa penekanan tombol terpisah dipicu untuk setiap karakter yang dimasukkan. Selain itu, tombol pengubah (seperti Shift) memicu peristiwa keydown tetapi tidak menekan tombol.

Anda harus menghentikan utas eksekusi untuk memungkinkan input diperbarui.

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

Ini karena Keypressacara dipecat sebelum karakter baru ditambahkan. Gunakan acara 'keyup' sebagai gantinya, yang akan bekerja dengan sempurna dalam situasi Anda.

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

Saya ingin menambahkan ini, jika Anda memiliki banyak kotak teks dan Anda harus melakukan hal yang sama pada acara keyup Anda, Anda bisa memberi mereka kelas css umum (misalnya commoncss) dan menerapkan event keyup seperti ini.

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

ini akan sangat mengurangi kode Anda karena Anda tidak harus menerapkan acara keyup oleh id untuk setiap kotak teks.

Saya sedang mencari contoh ES6 (sehingga bisa melewati linter saya) Jadi untuk orang lain yang mencari yang sama:

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

Saya juga akan menggunakan keyup karena Anda mendapatkan nilai saat ini yang diisi.

Cukup gunakan batas waktu untuk melakukan panggilan Anda; batas waktu akan dipanggil ketika tumpukan acara selesai (yaitu setelah acara standar dipanggil)

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

Saya pikir yang Anda butuhkan adalah prototipe di bawah ini

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

jQuery mendapatkan nilai input setelah tombol ditekan

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>