.keyCode so với .which

Tôi nghĩ rằng điều này sẽ được trả lời ở đâu đó trên Stack Overflow, nhưng tôi không thể tìm thấy nó.

Nếu tôi đang nghe một sự kiện nhấn phím, tôi nên sử dụng .keyCodehoặc .whichđể xác định xem phím Enter đã được nhấn chưa?

Tôi đã luôn luôn làm một cái gì đó như sau:

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

Nhưng tôi đang thấy các ví dụ sử dụng .whichthay vì .keyCode. Có gì khác biệt? Là một trình duyệt chéo thân thiện hơn so với người khác?

Lưu ý: Câu trả lời dưới đây được viết vào năm 2010. Ở đây nhiều năm sau, cả hai keyCodevà whichđều không được ủng hộ key(đối với khóa logic) và code(đối với vị trí vật lý của khóa). Nhưng lưu ý rằng IE không hỗ trợ codevà hỗ trợ của nó keydựa trên phiên bản cũ hơn của thông số kỹ thuật nên không hoàn toàn chính xác. Khi tôi viết điều này, Edge hiện tại dựa trên EdgeHTML và Chakra cũng không hỗ trợ code, nhưng Microsoft đang triển khai thay thế dựa trên Blink - và V8 cho Edge, có lẽ là sẽ / sẽ.

Một số trình duyệt sử dụng keyCode, số khác sử dụng which.

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng một cách đáng tin cậy whichkhi jQuery chuẩn hóa mọi thứ ; Thêm ở đây.

Nếu bạn không sử dụng jQuery, bạn có thể làm điều này:

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

Hay cách khác:

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

... Xử lý khả năng e.whichcó thể xảy ra 0(bằng cách khôi phục điều đó 0ở cuối, bằng cách sử dụng toán tử mạnh mẽ của JavaScript|| ).

jQuery normalises event.whichtuỳ thuộc vào việc event.which, event.keyCodehoặc event.charCodeđược hỗ trợ bởi các trình duyệt:

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

Một lợi ích bổ sung .whichlà jQuery cũng làm điều đó khi nhấp chuột:

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

Nếu bạn đang ở trong vanilla Javascript, xin lưu ý keyCode hiện không được dùng nữa và sẽ bị loại bỏ:

Tính năng này đã bị xóa khỏi các tiêu chuẩn Web. Mặc dù một số trình duyệt vẫn có thể hỗ trợ nó, nhưng nó đang trong quá trình bị loại bỏ. Tránh sử dụng nó và cập nhật mã hiện có nếu có thể; xem bảng tương thích ở dưới cùng của trang này để hướng dẫn quyết định của bạn. Xin lưu ý rằng tính năng này có thể ngừng hoạt động bất cứ lúc nào

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

Thay vào đó, hãy sử dụng: .key hoặc .code tùy thuộc vào hành vi bạn muốn: https://developer.mozilla.org/en-US/docs/Web/API/PalEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Cả hai đều được thực hiện trên các trình duyệt hiện đại.

nhìn vào đây: https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

Trong một sự kiện nhấn phím, giá trị Unicode của phím được nhấn được lưu trữ trong thuộc tính keyCode hoặc charCode, không bao giờ cả hai. Nếu phím được nhấn tạo ra một ký tự (ví dụ 'a'), charCode được đặt thành mã của ký tự đó, tôn trọng trường hợp chữ cái. (tức là charCode có tính đến việc phím shift có được giữ không). Mặt khác, mã của phím được nhấn được lưu trong keyCode. keyCode luôn được đặt trong các sự kiện keydown và keyup. Trong những trường hợp này, charCode không bao giờ được đặt. Để lấy mã của khóa bất kể nó được lưu trữ trong keyCode hay charCode, hãy truy vấn thuộc tính nào. Các ký tự được nhập thông qua IME không đăng ký thông qua keyCode hoặc charCode.

Tôi muốn giới thiệu event.keyhiện tại. Tài liệu MDN: https://developer.mozilla.org/en-US/docs/Web/API/PalEvent/key

event.KeyCodevà event.whichcả hai đều có những cảnh báo không được chấp nhận ở đầu trang MDN của họ:
https://developer.mozilla.org/en-US/docs/Web/API/PalEvent/keyCode https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / which

Đối với các khóa chữ và số, event.keydường như được triển khai giống hệt nhau trên tất cả các trình duyệt. Đối với các phím điều khiển (tab, enter, esc, v.v.), event.keycó cùng giá trị trên Chrome / FF / Safari / Opera nhưng giá trị khác trong IE10 / 11 / Edge (IE rõ ràng sử dụng phiên bản cũ hơn của thông số kỹ thuật nhưng khớp với nhau như ngày 14 tháng 1 năm 2018).

Đối với các phím chữ và số, một kiểm tra sẽ trông giống như:

event.key === 'a'

Đối với các nhân vật điều khiển, bạn cần phải làm một cái gì đó như:

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

Tôi đã sử dụng ví dụ ở đây để kiểm tra trên nhiều trình duyệt (tôi phải mở bằng codepen và chỉnh sửa để làm cho nó hoạt động với IE10): https://developer.mozilla.org/en-US/docs/Web/API/PalEvent/ mã

event.code được đề cập trong một câu trả lời khác như một khả năng, nhưng IE10 / 11 / Edge không thực hiện nó, vì vậy, nếu bạn muốn hỗ trợ IE.

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

hotkeys hiểu được bổ như sau: ⇧, shift, option, ⌥, alt, ctrl, control, command, và ⌘.

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

Trong Firefox, thuộc tính keyCode không hoạt động trên sự kiện onkeypress (sẽ chỉ trả về 0). Đối với giải pháp trình duyệt chéo, hãy sử dụng thuộc tính cùng với keyCode, ví dụ:

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