.keyCode vs. . ซึ่ง

ฉันคิดว่านี่จะได้รับคำตอบที่ไหนสักแห่งใน Stack Overflow แต่ฉันหามันไม่เจอ

หากฉันกำลังฟังเหตุการณ์ปุ่มกดฉันควรใช้.keyCodeหรือ.whichเพื่อตรวจสอบว่ากดแป้น Enter หรือไม่

ฉันทำสิ่งต่อไปนี้เสมอ:

$("#someid").keypress(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    // do something
  }
});

แต่ฉันเห็นตัวอย่างที่ใช้แทน.which .keyCodeความแตกต่างคืออะไร? ข้ามเบราว์เซอร์หนึ่งเป็นมิตรมากกว่าอีก?

หมายเหตุ:คำตอบด้านล่างนี้ถูกเขียนขึ้นในปี 2010 ที่นี่หลายปีต่อมาทั้งคู่keyCodeและwhichเลิกใช้แล้วkey(สำหรับคีย์ตรรกะ) และcode(สำหรับตำแหน่งทางกายภาพของคีย์) แต่โปรดทราบว่า IE ไม่รองรับcodeและการสนับสนุนkeyนั้นขึ้นอยู่กับข้อมูลจำเพาะรุ่นเก่าดังนั้นจึงไม่ค่อยถูกต้องนัก ขณะที่ฉันเขียนสิ่งนี้ Edge ปัจจุบันที่ใช้ EdgeHTML และ Chakra ก็ไม่รองรับcodeเช่นกัน แต่ Microsoft กำลังเปิดตัวBlink - และV8 ที่ใช้แทน Edge สำหรับ Edge ซึ่งน่าจะเป็นไปได้

เบราว์เซอร์บางคนใช้keyCodeคนอื่น ๆ whichใช้

หากคุณกำลังใช้ jQuery คุณได้อย่างน่าเชื่อถือสามารถใช้whichเป็น jQuery มาตรฐานสิ่ง ; เพิ่มเติมที่นี่

หากคุณไม่ได้ใช้ jQuery คุณสามารถทำได้:

var key = 'which' in e ? e.which : e.keyCode;

หรืออีกทางหนึ่ง:

var key = e.which || e.keyCode || 0;

... ซึ่งจัดการความเป็นไปได้ที่e.whichอาจเกิดขึ้น0(โดยการเรียกคืนนั้น0ในตอนท้ายโดยใช้โอเปอเรเตอร์ที่ทรงพลังของ JavaScript|| )

jQuery normalises event.whichขึ้นอยู่กับว่าevent.which, event.keyCodeหรือevent.charCodeได้รับการสนับสนุนโดยเบราเซอร์:

// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
   event.which = event.charCode != null ? event.charCode : event.keyCode;
}

ข้อดีอีกอย่างของ.whichjQuery คือการคลิกเมาส์ด้วย:

// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
    event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}

หากคุณยังคงอยู่ใน Javilla โปรดทราบว่ารหัสตอนนี้เลิกใช้แล้วและจะถูกทิ้ง:

คุณลักษณะนี้ถูกลบออกจากเว็บมาตรฐาน แม้ว่าเบราว์เซอร์บางตัวอาจยังคงสนับสนุนอยู่ แต่กำลังอยู่ระหว่างการทำตก หลีกเลี่ยงการใช้และอัปเดตรหัสที่มีอยู่ถ้าเป็นไปได้; ดูตารางความเข้ากันได้ที่ด้านล่างของหน้านี้เพื่อเป็นแนวทางในการตัดสินใจของคุณ โปรดทราบว่าคุณลักษณะนี้อาจหยุดทำงานเมื่อใดก็ได้

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

ให้ใช้: .keyหรือ. code แทนขึ้นอยู่กับพฤติกรรมที่คุณต้องการ: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / เอกสาร / Web / API / KeyboardEvent / คีย์

ทั้งสองถูกนำไปใช้กับเบราว์เซอร์ที่ทันสมัย

ดูที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

ในเหตุการณ์ keypress ค่า Unicode ของคีย์ที่กดจะถูกเก็บไว้ในคุณสมบัติ keyCode หรือ charCode ไม่เคยทั้งสองอย่าง หากคีย์ที่กดสร้างอักขระ (เช่น 'a') charCode จะถูกตั้งค่าเป็นรหัสของตัวละครนั้นโดยคำนึงถึงตัวอักษรพิมพ์ใหญ่ (เช่น charCode คำนึงถึงว่าปุ่ม Shift นั้นถูกพักไว้หรือไม่) มิฉะนั้นรหัสของคีย์ที่กดจะถูกเก็บไว้ใน keyCode keyCode ตั้งค่าเสมอในการดาวน์คีย์และเหตุการณ์คีย์อัพ ในกรณีเหล่านี้ charCode จะไม่ถูกตั้งค่า ในการรับโค้ดของคีย์โดยไม่คำนึงว่าเก็บไว้ใน keyCode หรือ charCode ให้ค้นหาคุณสมบัติใด อักขระที่ป้อนผ่าน IME ไม่ได้ลงทะเบียนผ่าน keyCode หรือ charCode

ฉันแนะนำevent.keyในขณะนี้ เอกสาร MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCodeและevent.whichทั้งคู่มีคำเตือนที่คัดค้านอย่างน่ารังเกียจที่ด้านบนสุดของหน้า MDN:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US / เอกสาร / Web / API / KeyboardEvent / ซึ่ง

สำหรับคีย์ตัวอักษรและตัวเลขevent.keyดูเหมือนว่าจะมีการใช้งานเหมือนกันในทุกเบราว์เซอร์ สำหรับปุ่มควบคุม (แท็บป้อนหนี ฯลฯ )event.keyมีค่าเดียวกันทั่วทั้ง Chrome / FF / Safari / Opera แต่ค่าที่แตกต่างใน IE10 / 11 / Edge (เห็นได้ชัดว่า IEs ใช้รุ่นที่เก่ากว่าของสเป็ค แต่ตรงกับกัน ของ 14 มกราคม 2018)

สำหรับปุ่มตัวอักษรและตัวเลขการตรวจสอบจะมีลักษณะดังนี้:

event.key === 'a'

สำหรับตัวควบคุมคุณต้องทำสิ่งต่อไปนี้:

event.key === 'Esc' || event.key === 'Escape'

ฉันใช้ตัวอย่างที่นี่เพื่อทดสอบกับเบราว์เซอร์หลายตัว (ฉันต้องเปิดใน codepen และแก้ไขเพื่อให้ทำงานกับ IE10 ได้): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ รหัส

event.code ถูกกล่าวถึงในคำตอบที่แตกต่างกันว่าเป็นไปได้ แต่ IE10 / 11 / Edge ไม่ได้ใช้มันดังนั้นมันจะออกมาถ้าคุณต้องการการสนับสนุน IE

ห้องสมุด Javascript ที่แข็งแกร่งสำหรับการจับแป้นพิมพ์และการป้อนคีย์ผสม มันไม่มีการพึ่งพา

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

องเข้าใจการปรับเปลี่ยนต่อไปนี้: ⇧, shift, option, ⌥, alt, ctrl, control,commandและ⌘และ

ปุ่มพิเศษดังต่อไปนี้สามารถนำมาใช้สำหรับทางลัด: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteและผ่านf1f19

ใน Firefox คุณสมบัติ keyCode ไม่ทำงานในเหตุการณ์ onkeypress (จะคืนค่าเป็น 0 เท่านั้น) สำหรับโซลูชันข้ามเบราว์เซอร์ให้ใช้คุณสมบัติใดพร้อมกับรหัสคีย์เช่น:

var x = event.which || event.keyCode;  // Use either which or keyCode, depending on browser support