Acara JQuery untuk pengguna menekan enter di kotak teks?

250

Apakah ada peristiwa di Jquery yang dipicu hanya jika pengguna menekan tombol enter di kotak teks? Atau plugin apa pun yang dapat ditambahkan untuk menyertakan ini? Jika tidak, bagaimana cara saya menulis plugin cepat yang akan melakukan ini?

javascript jquery jquery-events Klik Upvote
sumber

Jawaban:

446

Anda dapat memasang acara kustom Anda sendiri 

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

Jishnu AP
sumber
11
Perlu dicatat bahwa dalam skenario deteksi masuk untuk mencegah pengiriman formulir, acara "keyup" tidak optimal karena formulir mendeteksi pengiriman pada saat keydown. Jadi "keydown" atau "penekanan tombol" mungkin lebih baik dalam hal itu.
TechNyquist
7
Catatan, bind () tidak digunakan lagi di jQuery 3.0.
Bart Friederichs
Browser yang berbeda memiliki berbeda e.keyCodeuntuk beberapa tombol, lebih baik digunakan e.which, ini akan menjamin bahwa Anda akan menangani tombol yang sama pada setiap browser
Oleg Shakhov
99 
   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });
Etienne Dupuis
sumber
8
Terima kasih - Solusi ini cocok dengan use case saya. Namun, perlu dicatat bahwa setelah pemrosesan dilakukan, Anda mungkin ingin menambahkan `$ (ini) .removeAttr (" dinonaktifkan ");` untuk mengaktifkan kembali kotak teks.
misterjaytee
39

Ini adalah plugin untuk Anda: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})
Naftali alias Neal
sumber
Bagus. Jauh lebih sederhana dari URL yang saya posting. Saya bertanya-tanya apa sih artikel yang saya posting adalah semua tentang & mengapa butuh begitu banyak kode ..
CaptSaltyJack
1
Terlambat, saya sudah menulis sendiri: P. Itu juga melakukan pekerjaan yang sama dalam lebih sedikit baris .. juga, menggunakan $variabel untuk plugin itu bukan ide yang baik karena dapat menyebabkan konflik.
Klik Suara positif
@Neal, apakah Anda tahu bagaimana kode plugin yang saya poskan di jawaban yang diterima harus diubah, sehingga orang dapat melakukannya $("#myInput").bind('click, onEnter', myCallback);dan itu akan bekerja tanpa memerlukan yang lain?
Klik Suara positif
1
@ClickUpvote # 1: hapus dari jawaban - lalu kita bisa bicara.
Naftali alias Neal
@Neal Pria solusi yang luar biasa. Saya baru saja menyalin fungsi itu! Terima kasih!
Bilal Fazlani
17

inilah plugin jquery untuk melakukan itu

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

untuk menggunakannya, masukkan kode dan atur seperti ini:

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

jsfiddle di sini http://jsfiddle.net/VrwgP/30/

jzilla
sumber
2
Bagus, saya akan menelepon menggunakan callback func.apply(this), dengan cara itu di dalam fungsi callback Anda dapat menggunakan thisseperti biasa untuk mengakses elemen di mana peristiwa itu dipicu.
Klik Suara positif
yeah, poin bagus tentang func.apply (ini), bahkan tidak mempertimbangkan itu.
jzilla
Bagus dan ringkas, tetapi saya akan menambahkan bahwa menghentikan propagasi dan default akan menjadi ide yang baik dalam banyak kasus, untuk mencegah pengiriman formulir. Cukup tambahkan e.preventDefault(); e.stopPropagation();di dalam if (e.keyCode)bit.
Irongaze.com
8

Harus dicatat bahwa penggunaan live()dalam jQuery telah ditinggalkan sejak versi 1.7dan telah dihapus dalam jQuery 1.9. Sebagai gantinya, penggunaan on()disarankan.

Saya akan sangat menyarankan metodologi berikut untuk mengikat, karena memecahkan tantangan potensial berikut:

  1. Dengan mengikat peristiwa ke document.bodydan melewati $ selector sebagai argumen kedua on(), elemen dapat dilampirkan, dilepaskan, ditambahkan atau dihapus dari DOM tanpa perlu berurusan dengan peristiwa mengikat kembali atau mengikat ganda. Ini karena acara dilampirkan document.bodydaripada $selectorlangsung, yang berarti $selectordapat ditambahkan, dihapus dan ditambahkan lagi dan tidak akan pernah memuat acara yang terikat padanya.
  2. Dengan menelepon off()sebelumnya on(), skrip ini dapat hidup di dalam bagian utama halaman, atau di dalam tubuh panggilan AJAX, tanpa harus khawatir tentang peristiwa yang tidak sengaja mengikat ganda.
  3. Dengan membungkus skrip di dalamnya $(function() {...}), skrip ini dapat kembali dimuat oleh badan utama laman, atau di dalam badan panggilan AJAX. $(document).ready()tidak dipecat karena permintaan AJAX, sementara $(function() {...})demikian.

Berikut ini sebuah contoh:

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>
Joshua Burns
sumber
4

Jika input searchAnda, Anda juga dapat menggunakan on 'search'acara. Contoh

<input type="search" placeholder="Search" id="searchTextBox">

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
Phan Van Linh
sumber
3

Kode HTML: -

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

Kode Java Script

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

Formulir Anda tidak memiliki Tombol Kirim Default

yogesh lodha
sumber
2

Variasi halus lainnya. Saya melakukan sedikit pemisahan kekuatan, jadi saya memiliki plugin untuk mengaktifkan menangkap tombol enter, lalu saya hanya mengikat acara secara normal:

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

Dan kemudian digunakan:

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

Variasi ini memungkinkan Anda menggunakan delegasi acara (untuk mengikat elemen yang belum Anda buat).

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
Wilco
sumber
0

Saya tidak keypressdapat mengaktifkan acara untuk tombol enter, dan menggaruk kepala saya selama beberapa waktu, sampai saya membaca dokumen jQuery:

" Acara penekanan tombol dikirim ke elemen ketika browser mendaftar input keyboard. Ini mirip dengan acara keydown, kecuali bahwa pengubah dan kunci non-pencetakan seperti Shift, Esc, dan menghapus peristiwa pemicu keydown tetapi bukan peristiwa penekanan tombol. " ( https://api.jquery.com/keypress/ )

Saya harus menggunakan acara keyupatau keydownuntuk menangkap penekanan tombol enter.

Arne M
sumber