Bagaimana cara mendeteksi menekan Enter pada keyboard menggunakan jQuery?


731

Saya ingin mendeteksi apakah pengguna telah menekan Entermenggunakan jQuery.

Bagaimana ini mungkin? Apakah itu memerlukan plugin?

EDIT: Sepertinya saya perlu menggunakan keypress()metode ini.

Saya ingin tahu apakah ada yang tahu jika ada masalah browser dengan perintah itu - seperti apakah ada masalah kompatibilitas browser yang harus saya ketahui?


tautan tentang .keypress
Haim Evgi

5
Salah satu hal terbaik dalam kerangka kerja Javascript adalah bahwa mereka harus secara default kompatibel dengan browser. Mereka menangani pemeriksaan kompatibilitas browser sehingga pengguna tidak perlu melakukannya. Saya belum membaca kode sumber JQuery tapi saya ragu fungsi penekanan tombol berbeda dalam hal itu.
miek

2
satu-satunya masalah kompatibilitas browser adalah Anda harus menggunakan e.which alih-alih e.keyCode untuk mendeteksi kode ascii.
Daniel

Jawaban:


1330

Inti dari jQuery adalah Anda tidak perlu khawatir tentang perbedaan browser. Saya cukup yakin Anda bisa aman dengan entermenjadi 13 di semua browser. Maka dengan itu dalam pikiran, Anda dapat melakukan ini:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

7
Saya menghubungkan ke ini karena saya membaca ini dan pergi menggaruk-garuk kepala saya mengapa penekanan tombol tidak bekerja dengan IE. (tidak akan mengikat di $(window)bawah IE) quirksmode.org/dom/events/keys.html
Incognito

17
e.keyCode bukan 100% cross browser. gunakan e.yang bukan seperti yang ditunjukkan di bawah ini
Daniel

15
Dari dokumentasi jQuery "Properti event.which menormalkan event.keyCode dan event.charCode. Disarankan untuk menonton event.yang untuk input tombol keyboard."
Riccardo Galli

20
$ (dokumen) .on ('penekanan tombol', fungsi (e) {
user956584

5
Saya mendapatkan beberapa eksekusi dari fungsi yang diberikan karena propagasi acara (yaitu, peringatan dilemparkan dua kali). Untuk menghentikan ini, tambahkan e.stopPropagation () di akhir fungsi
dpb

129

Saya menulis sebuah plugin kecil untuk membuatnya lebih mudah untuk mengikat acara "saat tombol enter ditekan":

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Pemakaian:

$("#input").enterKey(function () {
    alert('Enter!');
})

Ini tidak berhasil untuk saya (saya tiba #inputdi <input>lapangan)
Rápli András

1
Bagaimana jika elemen #input akan dinamis?
Jigar7521

@mplungjan tidak yakin apa yang Anda maksud dengan "mendelegasikan"
Andrea

$("#input").on("someevent","someselector",function () {})
mplungjan

62

Saya tidak bisa mendapatkan kode yang diposting oleh @Paolo Bergantino untuk bekerja tetapi ketika saya mengubahnya $(document)dan e.whichbukannya e.keyCodekemudian saya menemukan itu berfungsi dengan sempurna.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Tautkan ke contoh di JS Bin


Bagi saya e.yang tidak bekerja dengan IE. Apakah ini berhasil untuk orang lain?
Umesh Rajbhandari

Versi IE yang mana? Bekerja dengan baik untuk saya di IE7.
Ian Roke

Dari dokumentasi jQuery "Properti event.which menormalkan event.keyCode dan event.charCode. Disarankan untuk menonton event.yang untuk input tombol keyboard."
Riccardo Galli

52

Saya menemukan ini lebih kompatibel lintas-browser:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

1
Ternary IF Anda dapat disingkat menjadi: var keycode = event.keyCode || acara.yang;
pistol-pete

29

Anda dapat melakukan ini menggunakan handle acara jquery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

11

Gunakan event.keydan JS modern!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

atau tanpa jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Docs

Browser yang Didukung


9

Saya menghabiskan beberapa waktu dengan solusi ini, saya harap ini membantu seseorang.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});


7

Sebuah ekstensi kecil dari jawaban Andrea di atas membuat metode helper lebih berguna ketika Anda mungkin juga ingin menangkap pers yang dimodifikasi (yaitu ctrl-enter atau shift-enter). Misalnya, varian ini memungkinkan pengikatan seperti:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

untuk mengirimkan formulir ketika pengguna menekan ctrl-enter dengan fokus pada textarea formulir itu.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(lihat juga Ctrl + Enter jQuery di TEXTAREA )


4

Dalam beberapa kasus, Anda mungkin perlu menekan ENTERtombol untuk area halaman tertentu tetapi tidak untuk area halaman lain, seperti halaman di bawah ini yang berisi header <div> dengan bidang SEARCH .

Butuh sedikit waktu untuk mencari tahu bagaimana melakukan ini, dan saya memposting contoh sederhana namun lengkap ini di sini untuk komunitas.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Tautan ke JSFiddle Playground : [Submit]Tombol tidak melakukan apa-apa, tetapi menekan ENTERdari salah satu kontrol Kotak Teks tidak akan mengirimkan formulir.



2

Karena keypressacara tidak dicakup oleh spesifikasi resmi apa pun, perilaku sebenarnya yang ditemui saat menggunakannya dapat berbeda di seluruh browser, versi browser, dan platform.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Semoga bermanfaat!


Untuk diketahui, alasan mengapa keypresstidak ada dalam spesifikasi (lagi) adalah karena sudah tidak digunakan lagi ( MDN ).
YellowAfterlife

jadi, saya edit ... tnx <3
Zoe_NS

0

Cara mudah untuk mendeteksi apakah pengguna telah menekan enter adalah dengan menggunakan nomor tombol, masukkan nomor tombol = 13 untuk memeriksa nilai kunci pada perangkat Anda

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

dengan menekan tombol enter Anda akan mendapatkan hasil sebagai 13. menggunakan nilai kunci Anda dapat memanggil suatu fungsi atau melakukan apa pun yang Anda inginkan

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

jika Anda ingin menargetkan tombol begitu tombol enter ditekan, Anda dapat menggunakan kode

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Semoga ini bisa membantu


0

Saya pikir metode paling sederhana akan menggunakan vanilla javacript:

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

0
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

3
Bisakah Anda menambahkan sedikit komentar penjelasan untuk menjelaskan kepada penanya bagaimana kode Anda bekerja - terima kasih.
SaschaM78

0
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Ini terlihat seperti adaptasi dari jawaban lain - dapatkah Anda menambahkan beberapa penjelasan untuk membuat jawaban Anda semenarik yang lain?
Nico Haase

0

Saya menggunakan $(document).on("keydown").

Pada beberapa browser keyCodetidak didukung. Sama dengan whichjadi jika keyCodetidak didukung Anda perlu menggunakan whichdan sebaliknya.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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.