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


559

ฉันมีสองหน้าที่ เมื่อกด 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)
});

Keypress จะส่งคืนอักขระที่เชื่อมต่อกับคีย์ (ในตัวพิมพ์ใหญ่ที่ถูกต้อง ฯลฯ ) Keyup จะส่งคืนจำนวนของปุ่มฮาร์ดแวร์ที่กด สำหรับ ESC คุณต้องการรหัสฮาร์ดแวร์ 27 (ไม่ใช่อักขระ ascii 27)
Joeri


มีเคล็ดลับง่าย ๆ ในการค้นหารหัสที่คุณต้องการ เพียงเปิดแท็บใหม่ใส่document.addEventListener("keydown", e => console.log(e.keyCode))ลงในคอนโซลเบราว์เซอร์ของคุณคลิกเข้าไปในหน้าต่างและกดปุ่มที่คุณกำลังมองหา
anarchist912

คำตอบ:


925

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

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

39
สิ่งนี้ไม่เกี่ยวกับการกดคีย์กับการกดคีย์ ในการจับภาพ ESCAPE คุณต้องดู e.keyCode ซึ่งตรงข้ามกับ e.which (ซึ่งตัวอย่างนี้เกิดขึ้นให้ทำ)
dkamins

211
"สิ่งนี้ไม่เกี่ยวกับการกดคีย์กับการกดปุ่ม" - นั่นไม่ถูกต้อง dkamins ดูเหมือนว่ากดปุ่มไม่ได้รับการจัดการอย่างสม่ำเสมอระหว่างเบราว์เซอร์ (ลองดูตัวอย่างได้ที่api.jquery.com/keypressใน IE vs Chrome กับ Firefox - บางครั้งมันไม่ลงทะเบียนและทั้ง 'ซึ่ง' และ 'รหัส' แตกต่างกัน) ในขณะที่การกดปุ่มมีความสอดคล้อง e.which คือค่า jquery-normalized ดังนั้น 'ซึ่ง' หรือ 'keyCode' ทั้งสองควรทำงานในคีย์อัพ
Jordan Brough

13
@Jordan Brough - ฉันต้องการขอให้คุณโพสต์ความคิดเห็นของคุณเป็นคำตอบเพื่อให้คนอ่านและเข้าใจความหมายที่แท้จริงของความคิดเห็นของคุณ! เนื่องจากความคิดเห็นของคุณมีความสำคัญเท่ากับคำตอบที่อธิบาย
Murtaza

15
keydownจะเลียนแบบพฤติกรรมดั้งเดิม - อย่างน้อยใน Windows ที่กด ESC หรือ Return ในกล่องโต้ตอบจะทริกเกอร์การกระทำก่อนที่จะปล่อยปุ่ม
Thomthom

2
@gibberish ฉันได้เพิ่มความคิดเห็นของฉันเป็นคำตอบที่นี่: stackoverflow.com/a/28502629/58876
Jordan Brough

77

แทนที่จะ 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 นี้แสดงวิธีที่ดีในการกำหนดวัตถุนั้นในเบราว์เซอร์อื่นเช่นกัน


15
อะไรนะที่ 27 ไม่เพียง แต่กระโดดออกมาใส่คุณเพื่อเป็นกุญแจหนี!? จริงๆแล้วต้องมีคนทำมากกว่านี้ ฉันเรียกพวกเขาว่า "หมายเลขเวทมนตร์" และ "สายอักขระเวทมนต์" 72 หมายถึงอะไร เหตุใดคุณจึงมีการคัดลอกสตริงที่เฉพาะเจาะจงและระเหยง่ายมาก 300 ครั้งในฐานรหัสของคุณ ฯลฯ
vbullinger

1
หรือคุณเพียงแค่เพิ่มความคิดเห็นข้างต้นเพราะคุณมีแนวโน้มที่จะใช้พวกเขาเพียงครั้งเดียว IMO เช่นเดียวกับที่อ่านได้
Ivan Durst

8
@IvanDurst คุณอาจใช้เพียงครั้งเดียวต่อวิธีแต่ฉันใช้หลายครั้งในโครงการของฉัน คุณแนะนำจริง ๆ ว่าคุณต้องการ (1) ค้นหาค่าและ (2) แสดงความคิดเห็นทุกครั้งที่คุณต้องการใช้รหัสสำคัญหรือไม่ ฉันไม่รู้เกี่ยวกับคุณ แต่ฉันไม่มีความปรารถนาที่จะจดจำพวกเขาหรือความเชื่อที่ว่าผู้เขียนโปรแกรมคนอื่นจะแสดงความคิดเห็นพวกเขาอย่างสม่ำเสมอ มันเกี่ยวกับการทำให้การเขียนโค้ดง่ายขึ้นและสอดคล้องกันมากขึ้นไม่ใช่แค่อ่านได้มากขึ้นเท่านั้น
Seth Petry-Johnson

2
ใครบางคนที่รู้ว่าพวกเขาหมายถึงอะไรไม่จำเป็นต้องค้นหาความหมายเพื่อแสดงความคิดเห็นและการพิมพ์ความคิดเห็นนั้นรวดเร็วเหมือนการพิมพ์ชื่อยาว
NetMage

6
เกิดอะไรขึ้นกับวันเก่า ๆ ที่ดีเมื่อเราใช้รหัสคงที่อักขระในฐานสิบหก? ทุกคนรู้ว่า ESC คืออะไร0x1Bและ Enter คือ0x0Dใช่มั้ย
David R Tribble

42

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

คุณจำเป็นต้องใช้มากกว่า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/ )


5
ฉันต้องการเพิ่มที่นี่ซึ่งเบราว์เซอร์ที่ไม่keypressใช้การหลบหนีกำลังทำสิ่งที่ถูกต้อง keypressหมายถึงการยิงเฉพาะเมื่อกุญแจสร้างตัวละครในขณะที่keyupไฟมักจะ developer.mozilla.org/en-US/docs/Web/Events/keypress
ohcibi

26

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

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

14

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


1
ฉันมีสองฟังก์ชั่นเมื่อป้อนคือกดฟังก์ชั่นการทำงานอย่างถูกต้อง แต่ไม่ได้มีปุ่มหลบหนี .. $ (เอกสาร) .keypress (ฟังก์ชั่น (e) {ถ้า (e.which == 13) {$ ('บันทึก') คลิก ();} ถ้า (e.which == 27) {$ ('. ยกเลิก'). คลิก ();}});
Shishant

$ (เอกสาร) .keypress (ฟังก์ชั่น (e) {y = e.keyCode? e.keyCode: e.which;}); เมื่อฉันแจ้งเตือน (y) จะแจ้งเตือน 27 ใน IE และ FF คุณแน่ใจหรือว่าไม่มีอะไรผิดปกติกับรหัสของคุณ?
เค็ม

14

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

$(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


10

ลองปลั๊กอิน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;
}

8

รหัสของคุณใช้งานได้ดี เป็นไปได้ว่าหน้าต่างที่ไม่ได้โฟกัส ฉันใช้ฟังก์ชั่นที่คล้ายกันเพื่อปิดกล่อง 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';
    }

});

8

ฉันกำลังพยายามทำสิ่งเดียวกันและกำลังดักอึออกจากฉัน ใน 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);
}

8

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

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

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

ที่มา: quirksmode


1
รุ่งโรจน์สำหรับการอ่านข้อมูลจำเพาะ! นี่ควรเป็นคำตอบที่ได้รับการยอมรับอย่างแน่นอน :)
DylanYoung

7

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


2
ฉันจะบอกว่า ..... ฉันเกลียดที่เว็บไซต์นี้อยู่ด้านบนสุดของผลการค้นหาเพราะมันน่าเกลียดมาก แต่มันสื่อข้อมูลที่จำเป็น
mpen

1
โปรดทราบว่ารหัสคีย์อาจไม่ตรงกับตาราง ascii เสมอไปทั้งนี้ขึ้นอยู่กับเหตุการณ์และเบราว์เซอร์
Alan H.

2
downvote: ไม่ตอบคำถามไม่ได้ตอบคำถาม hex ไม่ได้เกี่ยวข้องกับคำถามและ OP ได้แสดงความรู้เกี่ยวกับ esc == 27 แล้ว
Jeremy

7

เพียงแค่โพสต์คำตอบของการปรับปรุงกว่า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);

3
แต่ดูเหมือนว่าจะรองรับเฉพาะใน Firefox และ Chrome
Gayan Weerakutti

นี่คือรายการยาวของค่าคีย์
Bob Stein

แต่น่าเสียดายที่อย่างน้อยบางรุ่นของ Internet Explorer ผ่านรหัสมากกว่ามาตรฐานEsc Escape
Robin Stewart

6

ห้องสมุด 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;
    }
});

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

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



โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.