KeyboardEvent.keyCode không được dùng nữa. Điều này có ý nghĩa gì trong thực tế?

Question 1

Theo MDN, chúng ta chắc chắn không nên sử dụng.keyCode tài sản này. Nó không được dùng nữa:

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

Trên trường W3, thông tin này được đưa ra và chỉ có một lưu ý phụ nói rằng chỉ .keyCodeđược cung cấp để tương thích và phiên bản mới nhất của Đặc tả sự kiện DOM khuyên bạn nên sử dụng.key tính thay thế.

Vấn đề là .keykhông được hỗ trợ bởi các trình duyệt, vì vậy chúng ta nên sử dụng những gì? Có điều gì tôi đang thiếu?

Question 2

Bạn có ba cách để xử lý, vì nó được viết trên liên kết bạn đã chia sẻ.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

bạn nên xem xét chúng, đó là cách đúng nếu bạn muốn hỗ trợ nhiều trình duyệt.

Nó có thể dễ dàng hơn nếu bạn thực hiện một cái gì đó như thế này.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};

Question 3

Bên cạnh đó tất cả các keyCode , mà , charCode và keyIdentifier được chấp nhận:
charCodevà keyIdentifiernhững tính năng phi tiêu chuẩn.
keyIdentifierbị xóa kể từ Chrome 54 và Opera 41.0
keyCodetrả về 0, trong sự kiện nhấn phím với các ký tự bình thường trên FF.

Thuộc tính chính :

 readonly attribute DOMString key

Giữ một giá trị thuộc tính khóa tương ứng với phím được nhấn

Tính đến thời điểm viết bài này, thuộc keytính được hỗ trợ bởi tất cả các trình duyệt chính như: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Ngoại trừ Internet Explorer 11 có: mã nhận dạng khóa không chuẩn và hoạt động không chính xác với AltGraph. Thêm thông tin
Nếu điều đó quan trọng và / hoặc khả năng tương thích ngược, thì bạn có thể sử dụng tính năng phát hiện như trong đoạn mã sau:

Lưu ý rằng keygiá trị khác với keyCodehoặc whichthuộc tính ở chỗ: nó chứa tên của khóa chứ không phải mã của nó. Nếu chương trình của bạn cần mã ký tự thì bạn có thể sử dụng charCodeAt(). Đối với các ký tự có thể in đơn lẻ, bạn có thể sử dụng charCodeAt(), nếu bạn đang xử lý các khóa có giá trị chứa nhiều ký tự như ArrowUp cơ hội: bạn đang kiểm tra các khóa đặc biệt và thực hiện các hành động tương ứng. Vì vậy, cố gắng thực hiện một bảng giá trị phím và mã tương ứng của họ charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... và như vậy, xin vui lòng hãy nhìn vào giá trị chính và họ mã tương ứng

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */

Có thể bạn muốn xem xét khả năng tương thích chuyển tiếp, tức là sử dụng các thuộc tính kế thừa khi chúng có sẵn và chỉ khi bị loại bỏ, hãy chuyển sang các thuộc tính mới:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

Xem thêm: KeyboardEvent.codetài liệu về tài sản và một số chi tiết khác trong câu trả lời này .

Question 4

TLDR: Tôi khuyên bạn nên nên sử dụng các thuộc tính event.keyvà mới event.codethay vì các thuộc tính cũ. IE và Edge có hỗ trợ các thuộc tính này, nhưng chưa hỗ trợ các tên khóa mới. Đối với họ, có một polyfill nhỏ làm cho họ xuất ra các tên mã / khóa tiêu chuẩn:

https://github.com/shvaikalesh/shim-keyboard-event-key

Tôi đến với câu hỏi này để tìm kiếm lý do của cảnh báo MDN giống như OP. Sau khi tìm kiếm thêm, vấn đề keyCodetrở nên rõ ràng hơn:

Vấn đề khi sử dụng keyCodelà các bàn phím không phải tiếng Anh có thể tạo ra các kết quả đầu ra khác nhau và ngay cả các bàn phím có bố cục khác nhau cũng có thể tạo ra kết quả không nhất quán. Thêm vào đó, có trường hợp của

Nếu bạn đọc thông số kỹ thuật của W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

Trên thực tế, keyCode và charCode không nhất quán giữa các nền tảng và thậm chí việc triển khai giống nhau trên các hệ điều hành khác nhau hoặc sử dụng các bản địa hóa khác nhau.

Nó đi sâu vào một số mô tả những gì đã xảy ra với keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Các tính năng này chưa bao giờ được chỉ định chính thức và việc triển khai trình duyệt hiện tại khác nhau theo những cách đáng kể. Số lượng lớn nội dung kế thừa, bao gồm cả thư viện tập lệnh, dựa vào việc phát hiện tác nhân người dùng và hành động tương ứng có nghĩa là bất kỳ nỗ lực nào để chính thức hóa các thuộc tính và sự kiện kế thừa này sẽ có nguy cơ phá vỡ nhiều nội dung mà nó sẽ sửa hoặc bật. Ngoài ra, các thuộc tính này không phù hợp với việc sử dụng quốc tế, cũng như không giải quyết các vấn đề về khả năng tiếp cận.

Vì vậy, sau khi xác định lý do tại sao Mã khóa kế thừa bị thay thế, hãy xem những gì bạn cần làm hôm nay:

Tất cả các trình duyệt hiện đại đều hỗ trợ các thuộc tính mới (key và code).
IE và Edge hỗ trợ phiên bản cũ hơn của thông số kỹ thuật, có các tên khác nhau cho một số phím. Bạn có thể sử dụng miếng dán cho nó: https://github.com/shvaikalesh/shim-keyboard-event-key (hoặc cuộn của riêng bạn - dù sao nó cũng khá nhỏ)
Edge đã sửa lỗi này trong bản phát hành mới nhất (có thể sẽ được phát hành vào tháng 4 năm 2018) - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
Tham khảo danh sách các khóa sự kiện bạn có thể sử dụng: https://www.w3.org/TR/uievents-key/

Question 5

MDN đã cung cấp một giải pháp:

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

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);

Question 6

Ví dụ: nếu bạn muốn phát hiện xem phím "Enter" đã được nhấp hay chưa:

Thay vì

event.keyCode === 13

Làm nó thích

event.key === 'Enter'