Bagaimana saya bisa mendapatkan jquery .val () SETELAH acara penekanan tombol?

101

Saya mendapatkan:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Sekarang peringatan selalu mengembalikan nilai SEBELUM menekan tombol (misalnya bidang kosong, saya ketik 'a' dan peringatan memberi saya ". Lalu saya mengetik 'b' dan peringatan memberi saya 'a' ...). Tapi saya ingin nilainya SETELAH tombol ditekan - bagaimana saya bisa melakukannya?

Latar Belakang: Saya ingin mengaktifkan tombol segera setelah bidang teks berisi setidaknya satu karakter. Jadi saya menjalankan tes ini pada setiap acara penekanan tombol, tetapi menggunakan val yang dikembalikan () hasilnya selalu satu langkah di belakang. Menggunakan peristiwa change () bukan pilihan bagi saya karena tombol akan dinonaktifkan hingga Anda meninggalkan kotak teks. Jika ada cara yang lebih baik untuk melakukan itu, saya senang mendengarnya!

Jörg Brenninkmeyer
sumber
Haruskah tombol dinonaktifkan lagi jika teks dihapus? Jika demikian, Anda mungkin harus tetap menekan tombol.
Brilliand

Jawaban:

152

Ubah keypresske keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressditembakkan saat tombol ditekan, keyupditembakkan saat kunci dilepaskan.

Hore Im Membantu
sumber
@Brill Anda benar. Saya membuat solusi untuk ini, itu diposting di bawah ini.
David Oliveros
7
bagaimana Anda menyelesaikan ini di perangkat iPhone / Android? Mereka tidak mendukung fungsi keyup.
Merijn Den Houting
4
definisi penekanan tombol tidak sepenuhnya benar. itulah definisi keydown. lihat quirksmode.org/dom/events/keys.html
challet
59

Terkejut karena tidak ada yang menyebutkan acara "input" js:

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Direkomendasikan.

https://developer.mozilla.org/en-US/docs/Web/Events/input

billynoah
sumber
8
Wow, ini adalah jawaban dari beberapa pertanyaan SO yang belum terjawab / dijawab dengan buruk.
Ben Racicot
4
Ini juga bagus ketika Anda perlu mengabaikan menekan tombol panah, shift dll di bidang input.
hovado
2
caniuse.com/#search=input Dukungan browser yang relatif baik. Jawaban yang jauh lebih baik daripada mendengarkan setiap keyup.
James Haug
1
Ini menyelamatkan hariku! Terima kasih. Saya menggunakan kode berikut: $ ('. Subject_mark'). On ("input", function () {var $ th = $ (this); $ th.val ($ th.val (). Replace (/ [^ 0-9] / g, function (str) {return '';}));
arsho
9

bukannya menekan tombol, gunakan keyup .

Kris van der Mast
sumber
5

Sebagai alternatif, Anda dapat menggunakan peristiwa keydown dengan waktu tunggu 0.

Dengan begitu, perubahan akan diterapkan secara instan, alih-alih diterapkan saat pengguna berhenti menahan kunci.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
David Oliveros
sumber
Ini masih akan berperilaku aneh dalam kasus menahan Backspace ... mungkin penekanan tombol dengan batas waktu 0?
Brilliand
Ah, sudahlah, OP tidak menentukan apa yang harus terjadi jika bidang teks dikosongkan.
Brilliand
4

Anda mungkin ingin menghubungkan onchangeevent handler daripada menggunakan salah satu event utama.

$(someTextInputField).change(function() {
    alert($(this).val());
});

Menggunakan Edit > Pasteatau Klik Kanan lalu Tempel akan mengaktifkan peristiwa perubahan, tetapi bukan peristiwa penting. Perhatikan bahwa beberapa browser mungkin mensimulasikan peristiwa penting pada sebuah tempel (meskipun saya tidak tahu apa-apa) tetapi Anda tidak dapat mengandalkan perilaku itu.

Stephen P.
sumber
4

Coba sesuatu seperti ini:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

Itu hanya memperkenalkan waktu tunggu sehingga setelah perulangan peristiwa "penekanan tombol" selesai, kode Anda akan segera berjalan setelahnya. Interval pengatur waktu yang singkat (meskipun dibulatkan oleh browser) tidak akan terlihat.

edit - atau Anda dapat menggunakan "keyup" seperti yang dikatakan orang lain, meskipun semantiknya berbeda.

Runcing
sumber
Ini bukan masalah benig smart . Acara keyup tidak memberikan hasil yang sama. Anda mendapatkan peristiwa berbeda untuk shift, ctrl, dll dengan keyup - jika Anda ingin karakter yang sebenarnya diketik (seperti ampersand) daripada serangkaian peristiwa penting yang harus Anda periksa status tombol shift atau ctrl, tekan tombol adalah cara untuk pergi.
Ripside
1
Baik; itulah yang saya maksud dengan "semantiknya berbeda".
Pointy