Deteksi tombol Enter di bidang input teks


299

Saya mencoba melakukan fungsi jika enter ditekan saat input tertentu.

Apa yang saya lakukan salah?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Apakah ada cara yang lebih baik untuk melakukan ini yang akan mengatakan, jika masuk ditekan .input1fungsi lakukan?


Jawaban:


499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.

Di browser mana Anda mengujinya? Saya pikir versi IE yang lebih lama tidak memicu peristiwa keyup pada dokumen (meskipun tidak yakin tentang ini).
Joseph Silber

2
Kode Anda tidak berfungsi karena Anda menggunakan .is () dan membutuhkan === daripada ==. Lihat jawaban saya untuk lebih jelasnya.
wesbos

6
@ jQuerybeast Tidak diperlukan , dan event.keyCodeini adalah Number, jadi JavaScript akan mengambil langkah yang sama dengan ==atau ===.
alex

7
e.yang dinyatakan sebagai browser lintas yang lebih berguna
mohammad eslahi sani

2
Properti which, code, charCodedan keyCodesudah ditinggalkan developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , silahkan menambahkan informasi yang sebenarnya untuk jawaban Anda.
Sasay

120

event.key === "Enter"

Lebih baru dan lebih bersih: gunakan event.key. Tidak ada lagi kode angka yang berubah-ubah!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Jika Anda harus menggunakan jQuery:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Docs

Browser yang Didukung


6
pujian untuk versi javascript biasa, tidak yakin mengapa semua yang lain berada di jquery
Captain Fantastic

7
Karena, OP menaruh kode contohnya di jQuery dan (dan juga JavaScript) jQuery diberi tag.
Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Atau hanya mengikat ke input itu sendiri

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Untuk mengetahui keyCode mana yang Anda butuhkan, gunakan situs web http://keycode.info


Terima kasih. Saya telah belajar sesuatu yang baru. By the way saya menggunakan .is () BANYAK kali jadi itu bukan logika, tidak bisa berfungsi. Juga ==, sekali lagi saya menggunakan dua == untuk situasi lain
jQuerybeast

np, Anda harus selalu menggunakan ===
wesbos

12

Coba ini untuk mendeteksi Entertombol yang ditekan di kotak teks.

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

6

Mungkin sudah terlambat untuk menjawab pertanyaan ini. Tetapi kode berikut hanya mencegah kunci enter. Cukup salin dan tempel seharusnya berhasil.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

6

Cara terbaik yang saya temukan adalah menggunakan keydown( keyuptidak berfungsi dengan baik untuk saya).

Catatan: Saya juga menonaktifkan form submit karena biasanya ketika Anda suka melakukan beberapa tindakan ketika menekan Enter Key, satu-satunya yang Anda pikir tidak Anda sukai adalah mengirimkan form :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCode sudah usang event.which tidak, jadi ini lebih baik
Alex

3

Solusi yang bekerja untuk saya adalah sebagai berikut

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

1

Coba ini untuk mendeteksi tombol Enter yang ditekan dalam kotak teks.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO


0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

0

Kode ini menangani setiap input untuk saya di seluruh situs. Ia memeriksa KUNCI ENTER di dalam bidang INPUT dan tidak berhenti di TEXTAREA atau tempat lain.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.