คีย์รหัสใดสำหรับคีย์ escape ด้วย jQuery

ฉันมีสองหน้าที่ เมื่อกด Enter ฟังก์ชันจะทำงานอย่างถูกต้อง แต่เมื่อกด Escape จะไม่ทำงาน หมายเลขหลบหนีที่ถูกต้องสำหรับกุญแจคืออะไร?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

ลองกับเหตุการณ์ keyup :

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});

แทนที่จะ hardcode ค่ารหัสคีย์ในฟังก์ชันของคุณให้พิจารณาใช้ค่าคงที่ที่มีชื่อเพื่อสื่อความหมายของคุณได้ดีขึ้น:

var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ENTER) $('.save').click();
  if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});

เบราว์เซอร์บางตัว (เช่น FireFox, ไม่แน่ใจในตัวอื่น ๆ ) จะกำหนดKeyEventออบเจกต์ร่วมที่ทำให้ค่าคงที่ประเภทนี้สำหรับคุณ คำถาม SO นี้แสดงวิธีที่ดีในการกำหนดวัตถุนั้นในเบราว์เซอร์อื่นเช่นกัน

(คำตอบที่สกัดจากความคิดเห็นก่อนหน้าของฉัน )

คุณจำเป็นต้องใช้มากกว่าkeyup keypressเช่น:

$(document).keyup(function(e) {
  if (e.which == 13) $('.save').click();     // enter
  if (e.which == 27) $('.cancel').click();   // esc
});

keypressดูเหมือนจะไม่ได้รับการจัดการอย่างต่อเนื่องระหว่างเบราว์เซอร์ (ลองสาธิตที่http://api.jquery.com/keypressใน IE Chrome VS VS Firefox. บางครั้งkeypressไม่ได้ลงทะเบียนและค่าสำหรับทั้ง 'ซึ่ง' และ ' keyCode 'แตกต่างกันไป) ในขณะที่keyupสอดคล้องกัน

เนื่องจากมีการสนทนาของe.whichvs e.keyCode: โปรดทราบว่าe.whichเป็นค่า jquery-normalized และเป็นค่าที่แนะนำสำหรับการใช้งาน:

คุณสมบัติ event.which normalizes event.keyCode และ event.charCode ขอแนะนำให้ดูเหตุการณ์ซึ่งสำหรับการป้อนคีย์แป้นพิมพ์

(จากhttp://api.jquery.com/event.which/ )

ในการค้นหารหัสสำหรับคีย์ใด ๆ ให้ใช้ฟังก์ชันง่าย ๆ นี้:

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}

27เป็นรหัสสำหรับคีย์ escape :)

ทางออกที่ดีที่สุดของคุณคือ

$(document).keyup(function(e) { 
    if (e.which === 13) $('.save').click();   // enter 
    if (e.which === 27) $('.cancel').click(); // esc   

    /* OPTIONAL: Only if you want other elements to ignore event */
    e.preventDefault();
    e.stopPropagation();
});

สรุป

• whichเป็นที่นิยมมากกว่าkeyCodeเพราะปกติ
• keyup เป็นที่นิยมมากกว่า keydownเพราะการกดปุ่มอาจเกิดขึ้นหลายครั้งหากผู้ใช้ยังคงกด
• ห้ามใช้keypressนอกเสียจากคุณต้องการจับภาพตัวละครจริง

Bootstrap ที่น่าสนใจใช้ keydown และ keyCode ในองค์ประกอบแบบหล่นลง (ตั้งแต่ 3.0.2)! ฉันคิดว่ามันอาจเป็นทางเลือกที่น่าสงสาร

ตัวอย่างที่เกี่ยวข้องจาก JQuery doc

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

รายการที่น่าสนใจอื่น ๆ : JavaScript Keypress Library

ลองปลั๊กอินjEscape ( ดาวน์โหลดจาก google ไดรฟ์ )

$(document).escape(function() { 
   alert('ESC button pressed'); 
});

หรือรับรหัสสำหรับเบราว์เซอร์ข้าม

var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');

บางทีคุณสามารถใช้สวิตช์

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}

รหัสของคุณใช้งานได้ดี เป็นไปได้ว่าหน้าต่างที่ไม่ได้โฟกัส ฉันใช้ฟังก์ชั่นที่คล้ายกันเพื่อปิดกล่อง iframe เป็นต้น

$(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

});

$(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
      parent.document.getElementById('iframediv').style.display='none';
      parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

});

ฉันกำลังพยายามทำสิ่งเดียวกันและกำลังดักอึออกจากฉัน ใน firefox ปรากฏว่าถ้าคุณพยายามทำบางสิ่งเมื่อกดแป้น Escape มันจะยังคงประมวลผลรหัสกุญแจซึ่งจะยกเลิกสิ่งที่คุณพยายามทำต่อไป การแจ้งเตือนทำงานได้ดี แต่ในกรณีของฉันฉันต้องการย้อนกลับไปในประวัติศาสตร์ที่ไม่ได้ผล ในที่สุดก็พบว่าฉันต้องบังคับให้การเผยแพร่เหตุการณ์หยุดดังที่แสดงด้านล่าง ...

if (keyCode == 27)
{
    history.back();

    if (window.event)
    {
        // IE works fine anyways so this isn't really needed
        e.cancelBubble = true;
        e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
        // In firefox, this is what keeps the escape key from canceling the history.back()
        e.stopPropagation();
        e.preventDefault();
    }

    return (false);
}

เพื่ออธิบายตำแหน่งที่คำตอบอื่น ๆ ไม่ได้; keypressปัญหาคือการใช้งานของ

บางทีอาจจะเป็นเหตุการณ์ที่เกิดขึ้นเป็นเพียงการผิดพลาดชื่อ แต่ถูกกำหนดให้เกิดไฟไหม้เมื่อkeypress นั่นคือข้อความ ในขณะที่สิ่งที่คุณต้องการคือ/ ซึ่งจะยิงเมื่อใดก็ตาม (ก่อนหรือหลังตามลำดับ)when an actualcharacteris being inserted
keydownkeyupthe user depresses akey(ก่อนหรือหลังตามลำดับ) นั่นคือสิ่งที่อยู่บนแป้นพิมพ์

ความแตกต่างที่ปรากฏขึ้นที่นี่เพราะescเป็นตัวละครที่ควบคุม (ตัวอักษร 'ไม่ใช่การพิมพ์ตัวอักษร) และอื่น ๆ ไม่ได้เขียนข้อความใด ๆ keypressจึงไม่ได้ยิง
enterเป็นเรื่องแปลกเพราะแม้ว่าคุณจะใช้เป็นตัวควบคุม (เช่นเพื่อควบคุม UI) แต่ก็ยังคงแทรกอักขระบรรทัดใหม่ซึ่งจะเริ่มkeypressทำงาน

ที่มา: quirksmode

ในการรับรหัสฐานสิบหกสำหรับตัวละครทั้งหมด: http://asciitable.com/

เพียงแค่โพสต์คำตอบของการปรับปรุงกว่าe.keyCodeถือว่าเลิกใช้งานใน MDN

ค่อนข้างคุณควรเลือกใช้e.keyแทนซึ่งรองรับชื่อที่สะอาดสำหรับทุกสิ่ง นี่คือพาสต้าสำเนาที่เกี่ยวข้อง

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

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

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

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

องเข้าใจการปรับเปลี่ยนต่อไปนี้: ⇧, และshiftoption⌥altctrlcontrolcommand⌘

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

ฉันมักจะใช้ปุ่มกดและ e.which ในการรับคีย์ escape

ฉันรู้ว่าคำถามนี้ถามเกี่ยวกับ jquery แต่สำหรับคนเหล่านั้นที่ใช้ jqueryui มีค่าคงที่สำหรับหลาย ๆ รหัส:

$.ui.keyCode.ESCAPE

http://api.jqueryui.com/jQuery.ui.keyCode/