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?

javascript jquery keyboard-events enter jquery-events chris
sumber

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

1

stackoverflow.com/questions/302122/…

Lemo

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!');
    }
});

Paolo Bergantino
sumber

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!');
})

Andrea
sumber

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

Ian Roke
sumber

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');    
    }
});

jesal
sumber

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!");
    });

Nasruddin
sumber

11

Gunakan `event.key`dan 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

Gibolt
sumber

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');
    }
  });

});

Samuel Kwame Antwi
sumber

8

Ada metode acara yang menekan tombol () . Nomor ascii tombol Enter adalah 13 dan tidak tergantung pada browser yang digunakan.

Richard Simões
sumber

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 )

joeln
sumber

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.

kode jp2
sumber

4

Coba ini untuk mendeteksi tombol Enter yang ditekan.

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

Lihat demo @ deteksi tekan tombol enter pada keyboard

jonathan klevin
sumber

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>

Luaskan cuplikan

Semoga bermanfaat!

Zoe_NS
sumber

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

pengguna2216399
sumber

0

Saya pikir metode paling sederhana akan menggunakan vanilla javacript:

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

Duan Walker
sumber

0

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

Tayfun Açıkgöz
sumber

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

AzizAhmad
sumber

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>

Luaskan cuplikan

Justin Liu
sumber

Bagaimana cara mendeteksi menekan Enter pada keyboard menggunakan jQuery?

Jawaban:

Gunakan `event.key`dan JS modern!

Bagaimana cara mendeteksi menekan Enter pada keyboard menggunakan jQuery?

Jawaban:

Gunakan event.keydan JS modern!

Gunakan `event.key`dan JS modern!