jQuery Keypress Acara: Tombol mana yang ditekan?

706

Dengan jQuery, bagaimana saya mengetahui tombol mana yang ditekan ketika saya mengikat keypress event?

$('#searchbox input').bind('keypress', function(e) {});

Saya ingin memicu pengiriman saat ENTERditekan.

[Memperbarui]

Meskipun saya menemukan (atau lebih baik: satu) menjawab sendiri, sepertinya ada beberapa ruang untuk variasi;)

Apakah ada perbedaan antara keyCodedan which- terutama jika saya hanya mencari ENTER, yang tidak akan pernah menjadi kunci unicode?

Apakah beberapa browser menyediakan satu properti dan yang lain menyediakan yang lainnya?

BlaM
sumber
295
** Jika ada yang mencapai ini dari Google (seperti yang saya lakukan), ketahuilah bahwa "keyup" bukan "penekanan tombol" berfungsi di Firefox, IE, dan Chrome. "penekanan tombol" ternyata hanya berfungsi di Firefox.
Tyler
17
juga, "keydown" bekerja lebih baik daripada "keyup" untuk memicu suatu peristiwa SETELAH kunci telah ditekan (jelas) tetapi ini penting jika Anda mengatakan ingin memicu suatu peristiwa pada ruang belakang KEDUA jika sebuah textarea kosong
Tyler
12
Adapun e.keyCode VS e.which ... Dari pengujian saya, Chrome dan IE8: handler penekanan tombol () hanya akan dipicu untuk karakter normal (mis. Bukan Atas / Bawah / Ctrl), dan kedua e.keyCode dan e. yang akan mengembalikan kode ASCII. Namun di Firefox, semua tombol akan memicu penekanan tombol (), TETAPI: untuk karakter normal e.yang akan mengembalikan kode ASCII dan e.keyCode akan mengembalikan 0, dan untuk karakter khusus (mis. Atas / Bawah / Ctrl) e.keyCode akan kembali kode keyboard, dan e.yang akan mengembalikan 0. Betapa menyenangkan.
jackocnr
4
Peringatan: JANGAN gunakan yang dari kode google. Penulis jquery mengirimkan tambalan, yang hanya ada di repositori github (dan juga garpu John Resig): github.com/tzuryby/jquery.hotkeys . Yang dari kode google keliru ketika mengikat lebih dari satu peristiwa kunci ke node dom yang sama. Yang baru menyelesaikannya.
Daniel Ribeiro
4
"keyup" akan terpicu sangat terlambat ketika Anda misalnya menekan tombol untuk waktu yang lama. Lihat di sini jsbin.com/aquxit/3/edit sehingga keydown adalah cara untuk pergi
Toskan

Jawaban:

844

Sebenarnya ini lebih baik:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Eran Galperin
sumber
84
if ((e.keyCode || e.which) == 13)? ;)
Kezzer
49
Menurut komentar lebih lanjut di halaman ini, jQuery menormalkan sehingga 'yang' didefinisikan pada objek acara setiap saat. Jadi, memeriksa 'keyCode' seharusnya tidak perlu.
Ztyx
197
Mengapa jumlah besar upvote? Pertanyaannya adalah tentang jQuery, yang menormalkan hal ini, jadi tidak perlu menggunakan apa pun selaine.which , acara apa pun yang Anda gunakan.
Tim Down
48
@Tim: Aduh, saya baru saja menguji ini dengan Firefox menggunakan api.jquery.com/keypress : ketika saya menekan <Tab>, e.whichtidak disetel (tetap 0), tetapi e.keyCodesedang ( 9). Lihat stackoverflow.com/questions/4793233/... mengapa ini penting.
Marcel Korpel
3
@ Marscel: Ya, penanganan kunci jQuery memiliki kekurangan dan itu adalah contoh yang tidak menguntungkan, tetapi untuk tombol Enter, yang merupakan pertanyaan yang ditanyakan, situasinya sangat sederhana.
Tim Down
133

Coba ini

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Vladimir Prudnikov
sumber
5
@VladimirPrudnikov Oh, oh, Ahhhh! Ahh! ada mac's eveywhere di tautan itu - the humanity !!!
Ben DeMott
1
Yah, kami meluncurkan versi baru dengan aplikasi Windows juga .. lihat snippets.me
Vladimir Prudnikov
2
@VladimirPrudnikov bagaimana dengan versi linux?
Arda
@Arda kami tidak memiliki rencana untuk versi linux. Akan ada aplikasi web dan API publik, jadi, mungkin seseorang akan membuatnya :)
Vladimir Prudnikov
1
Ha ha ha, alat pengembang tanpa rencana untuk linux. Kaya!
Ziggy
61

Jika Anda menggunakan jQuery UI, Anda memiliki terjemahan untuk kode kunci umum. Dalam ui / ui / ui.core.js :

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

Ada juga beberapa terjemahan dalam tes / simulasikan / jquery.simulate.js tapi saya tidak dapat menemukannya di perpustakaan inti JS. Pikiran Anda, saya hanya mengambil sumber. Mungkin ada beberapa cara lain untuk menghilangkan angka ajaib ini.

Anda juga dapat menggunakan String.charCodeAt dan .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
pengguna35612
sumber
13
Koreksi itu * $. Ui.keyCode.ENTER ** tidak * $. KeyCode.ENTER - tidak bekerja seperti pesona meskipun thx untuk tip!
daniellmb
Uncaught TypeError: String.charCodeAt is not a functionSaya pikir Anda bermaksud mengatakan'\r'.charCodeAt(0) == 13
Patrick Roberts
39

Karena Anda menggunakan jQuery, Anda harus benar-benar menggunakan .which. Ya, peramban yang berbeda mengatur properti yang berbeda, tetapi jQuery akan menormalkannya dan menetapkan nilai .which di setiap kasus. Lihat dokumentasi di http://api.jquery.com/keydown/ ia menyatakan:

Untuk menentukan tombol mana yang ditekan, kita dapat memeriksa objek acara yang diteruskan ke fungsi handler. Sementara browser menggunakan properti yang berbeda untuk menyimpan informasi ini, jQuery menormalkan properti .which sehingga kami dapat menggunakannya untuk mengambil kode kunci.

Frank Schwieterman
sumber
2
Dari apa yang saya lihat menggunakan event.which dan mencoba membandingkan dengan $ .ui.keyCode menghasilkan perilaku yang tidak pasti. Khususnya huruf kecil [L] yang memetakan ke $ .ui.keyCode.NUMPAD_ENTER. Imut.
Danny
4
Apakah Anda memiliki repro yang menunjukkan bug ini? Lebih baik melaporkan ini ke pemilik jQuery daripada mencoba untuk mengimplementasikan kembali pekerjaan mereka.
Frank Schwieterman
31

... contoh ini mencegah pengiriman formulir (secara teratur niat dasar ketika menangkap keystroke # 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
pengguna184365
sumber
28

sunting: Ini hanya berfungsi untuk IE ...

Saya menyadari ini adalah posting lama, tetapi seseorang mungkin menganggap ini berguna.

Acara utama dipetakan, jadi alih-alih menggunakan nilai kode kunci Anda juga dapat menggunakan nilai kunci untuk membuatnya sedikit lebih mudah dibaca.

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

Berikut adalah lembar contekan dengan kunci yang dipetakan yang saya dapatkan dari blog ini masukkan deskripsi gambar di sini

Kevin
sumber
5
Tidak ada e.keyproperti.
SLaks
3
Hmm, sepertinya ini properti khusus IE. Ini berfungsi untuk aplikasi saya di IE tetapi tidak Chrome. Kira saya menggunakan kode kunci.
Kevin
28
 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });
Luca Filosofi
sumber
1
Inilah jawaban sebenarnya. Yang diterima akan bekerja untuk beberapa kunci (seperti masuk) tetapi akan gagal untuk yang lain (seperti supr yang akan dikira oleh a.)
Oscar Foley
19
Ini adalah paste langsung dari sumber jQuery, dan merupakan kode yang digunakan jQuery untuk menormalkan properti .which event.
Ian Clelland
@Ian Clelland: saya tidak mengerti maksud Anda, apakah ini berfungsi dengan baik atau tidak !? lol
Luca Filosofi
13
Itu berhasil; Saya yakin itu, karena jQuery menggunakan persis kode itu :) Jika Anda sudah memiliki jQuery tersedia, maka gunakan saja - Anda tidak perlu memiliki ini dalam kode Anda sendiri.
Ian Clelland
1
@ aSeptik: Pertanyaannya adalah "Saya punya jQuery; bagaimana cara saya menekan tombol" - jawaban Anda menunjukkan bagaimana jQuery mendapatkannya di tempat pertama. Maksud saya adalah karena jQuery sudah berisi baris kode ini, ia tidak membutuhkannya. Dia hanya bisa menggunakan event.which.
Ian Clelland
21

Periksa plugin jquery.hotkeys yang sangat baik yang mendukung kombinasi tombol:

$(document).bind('keydown', 'ctrl+c', fn);
pengguna397198
sumber
14
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

Semoga ini bisa membantu Anda !!!


sumber
12

Ini adalah daftar keycode yang lengkap:

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
Ivan
sumber
6

Berikut ini adalah uraian lengkap tentang perilaku berbagai browser http://unixpapa.com/js/key.html

Phil
sumber
2
Ini benar-benar halaman yang harus dibaca oleh semua orang yang kebingungan mencari jawaban yang tidak ada harapan.
Tim Down
5

Saya hanya akan melengkapi kode solusi dengan baris ini e.preventDefault();. Dalam hal bidang input formulir kami tidak hadir untuk mengirimkan saat masuk ditekan

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
dzona
sumber
4

Tambahkan submit tersembunyi, bukan tipe tersembunyi, cukup kirim dengan style = "display: none". Ini adalah contoh (menghapus atribut yang tidak perlu dari kode).

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

itu akan menerima tombol enter asli, tidak perlu JavaScript, bekerja di setiap browser.

Pedja
sumber
4

Ini adalah ekstensi jquery yang akan menangani tombol enter yang sedang ditekan.

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

Contoh kerja dapat ditemukan di sini http://jsfiddle.net/EnjB3/8/

Reid Evans
sumber
4

Penyihir;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

Demo: http://jsfiddle.net/molokoloco/hgXyq/24/

molokoloco
sumber
4

Gunakan event.keydan JS modern!

Tidak ada kode angka lagi. Anda dapat memeriksa kunci secara langsung. Sebagai contoh "Enter", "LeftArrow", "r", atau "R".

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozilla Docs

Browser yang Didukung

Gibolt
sumber
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

Anda harus memiliki firbug untuk melihat hasilnya di konsol

manny
sumber
3

Beberapa browser menggunakan keyCode, yang lain menggunakan itu. Jika Anda menggunakan jQuery, Anda dapat menggunakan jQuery sebagai standar. Sebenarnya,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
Hitesh Modha
sumber
2

Menurut jawaban Kilian:

Jika hanya memasukkan tombol-tekan itu penting:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

sumber
2

Cara termudah yang saya lakukan adalah:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Rodolfo Jorge Nemer Nogueira
sumber
1
Akan lebih baik menggunakan event.whichdaripada event.keyCode. Dari jQuery API :The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
zanetu
2

Saya baru saja membuat plugin untuk jQuery yang memungkinkan keypressacara yang lebih mudah . Alih-alih harus menemukan nomor dan memasukkannya, yang harus Anda lakukan adalah ini:

Bagaimana cara menggunakannya

  1. Sertakan kode yang saya miliki di bawah ini
  2. Jalankan kode ini:
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

Sesederhana itu. Harap dicatat bahwa theKeyYouWantToFireAPressEventForitu bukan angka, tetapi string (mis. "a"Untuk menembak ketika Aditekan, "ctrl"untuk menembak ketika ditekan, atau, dalam kasus nomor, hanya , tidak ada tanda kutip. Itu akan menyala ketika ditekan.)CTRL (control)11

Contoh / Kode:

Karena versi yang panjang sangat ... yah ... lama, saya telah membuat tautan PasteBin untuk itu:
http://pastebin.com/VUaDevz1

Zach Barham
sumber
Anda dapat membuat fungsi ini jauh lebih pendek dan lebih cepat jika Anda tidak menggunakan jutaan perbandingan "jika" -> jsfiddle.net/BlaM/bcguctrx - Juga perlu diketahui bahwa - misalnya - openbracket dan closebracket tidak membuka / menutup braket pada suatu Keyboard Jerman`.
BlaM
Saya menyukai solusi ini. bagus.
Jay
-9

Coba ini:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
Omar Yepez
sumber