Mã khóa nào cho khóa thoát với jQuery

Tôi có hai chức năng. Khi nhấn Enter, các chức năng sẽ chạy chính xác nhưng khi nhấn thoát thì không. Số chính xác cho khóa thoát là gì?

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

Thử với sự kiện keyup :

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

Thay vì mã hóa các giá trị mã khóa trong hàm của bạn, hãy xem xét sử dụng các hằng số được đặt tên để truyền đạt ý nghĩa của bạn tốt hơn:

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

Một số trình duyệt (như FireFox, không chắc chắn về các trình duyệt khác) xác định một KeyEventđối tượng toàn cầu hiển thị các loại hằng này cho bạn. Câu hỏi SO này cũng cho thấy một cách hay để xác định đối tượng đó trong các trình duyệt khác.

(Câu trả lời trích từ nhận xét trước của tôi )

Bạn cần sử dụng keyupchứ không phải keypress. ví dụ:

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

keypressdường như không được xử lý một cách nhất quán giữa các trình duyệt (thử bản demo tại http://api.jquery.com/keypress trong IE vs Chrome vs Firefox. Đôi khi keypress, không đăng ký và các giá trị cho cả 'which' và ' keyCode 'khác nhau) trong khi đó keyuplà nhất quán.

Vì đã có một số cuộc thảo luận về e.whichvs e.keyCode: Lưu ý rằng đó e.whichlà giá trị chuẩn hóa của jquery và là giá trị được đề xuất để sử dụng:

Thuộc tính event.which bình thường hóa event.keyCode và event.charCode. Bạn nên xem event.which để nhập phím bàn phím.

(từ http://api.jquery.com/event.which/ )

Để tìm mã khóa cho bất kỳ khóa nào, hãy sử dụng chức năng đơn giản này:

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

27là mã cho khóa thoát. :)

Đặt cược tốt nhất của bạn là

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

Tóm lược

• whichđược ưa thích hơn là keyCodevì nó được chuẩn hóa
• keyupđược ưa thích hơn keydownvì phím tắt có thể xảy ra nhiều lần nếu người dùng nhấn nó.
• Không sử dụng keypresstrừ khi bạn muốn chụp các ký tự thực tế.

Thật thú vị Bootstrap sử dụng keydown và keyCode trong thành phần thả xuống của nó (kể từ 3.0.2)! Tôi nghĩ rằng đó có thể là sự lựa chọn nghèo nàn ở đó.

Đoạn mã liên quan từ tài liệu JQuery

Trong khi các trình duyệt sử dụng các thuộc tính khác nhau để lưu trữ thông tin này, jQuery bình thường hóa thuộc tính .which để bạn có thể sử dụng nó một cách đáng tin cậy để lấy mã khóa. Mã này tương ứng với một phím trên bàn phím, bao gồm mã cho các phím đặc biệt như mũi tên. Để bắt mục nhập văn bản thực tế, .keypress () có thể là lựa chọn tốt hơn.

Mục quan tâm khác: Thư viện phím JavaScript

Hãy thử plugin jEscape ( tải xuống từ ổ đĩa google )

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

hoặc lấy mã khóa cho trình duyệt chéo

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

có lẽ bạn có thể sử dụng chuyển đổi

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

Mã của bạn hoạt động tốt. Rất có thể cửa sổ không tập trung. Tôi sử dụng một chức năng tương tự để đóng hộp iframe, v.v.

$(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';
    }

});

Tôi đang cố gắng làm điều tương tự và nó đã làm tôi thất vọng. Trong firefox, có vẻ như nếu bạn cố gắng thực hiện một số điều khi nhấn phím thoát, nó sẽ tiếp tục xử lý phím thoát và sau đó hủy bỏ mọi thứ bạn đang cố gắng làm. Cảnh báo hoạt động tốt. Nhưng trong trường hợp của tôi, tôi muốn quay lại lịch sử không hoạt động. Cuối cùng đã tìm ra rằng tôi phải buộc việc truyền bá sự kiện phải dừng lại như hình dưới đây ...

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

Để giải thích những câu trả lời khác chưa có; vấn đề là bạn sử dụng keypress.

Có lẽ sự kiện chỉ được đặt tên sai nhưng keypressđược xác định để bắn khi . Tức là văn bản. Trong khi những gì bạn muốn là / , sẽ kích hoạt bất cứ khi nào (trước hoặc sau, tương ứng) . Tức là những thứ đó trên bàn phím.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

Sự khác biệt xuất hiện ở đây vì esclà một ký tự điều khiển (nghĩa đen là ' ký tự không in') và do đó không viết bất kỳ văn bản nào, do đó thậm chí không bắn keypress.
enterlà lạ, bởi vì mặc dù bạn đang sử dụng nó làm ký tự điều khiển (tức là để điều khiển UI), nó vẫn đang chèn một ký tự dòng mới, sẽ kích hoạt keypress.

Nguồn: quirksmode

Để lấy mã hex cho tất cả các ký tự: http://asciitable.com/

Chỉ cần đăng một câu trả lời cập nhật hơn e.keyCodeđược coi là ĐỔI trên MDN .

Thay vào đó, bạn nên chọn e.keythay vì hỗ trợ tên sạch cho mọi thứ. Đây là mì ống sao chép có liên quan

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

Một thư viện Javascript mạnh mẽ để chụp đầu vào bàn phím và các tổ hợp phím được nhập. Nó không có phụ thuộc.

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

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

hotkeys hiểu được bổ như sau: ⇧, shiftoption⌥altctrlcontrolcommand, và ⌘.

Các phím đặc biệt sau đây có thể được sử dụng cho các phím tắt: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletevà f1thông qua f19.

Tôi đã luôn sử dụng keyup và e.which để bắt key thoát.

Tôi biết câu hỏi này là hỏi về jquery, nhưng đối với những người sử dụng jqueryui, có các hằng số cho nhiều mã khóa:

$.ui.keyCode.ESCAPE

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