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?

jQuerybeast
sumber
1
Kemungkinan duplikat acara tekan tombol Enter di JavaScript
Bae

Jawaban:

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


//keyup not compatible with Jquery select(), Keydown is.
Joseph Silber
sumber
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

Gibolt
sumber
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

wesbos
sumber
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
    }
 });

});
ShankarSangoli
sumber
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>
Indra Kumar S
sumber
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;
    }
});
Roy Shoa
sumber
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
    }
});
Jorge Santos Neill
sumber
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

jonathan klevin
sumber
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
sumber
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;
 }
});
Umar Niazi
sumber