KeyboardEvent.keyCode는 더 이상 사용되지 않습니다. 이것은 실제로 무엇을 의미합니까?

Question 1

MDN에 따르면 우리는 이 속성을 사용 하지 않아야 .keyCode합니다. 더 이상 사용되지 않습니다.

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

W3 학교에서는이 사실이 무시되고 .keyCode호환성을 위해서만 제공되며 DOM 이벤트 사양의 최신 버전이 .key대신 속성을 사용하도록 권장 한다는 부수적 인 메모 만 있습니다.

문제는 .key브라우저에서 지원하지 않는 것인데 무엇을 사용해야할까요? 내가 놓친 것이 있습니까?

Question 2

공유 한 링크에 기록 된대로 세 가지 방법으로 처리 할 수 있습니다.

if (event.key !== undefined) {

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

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

}

크로스 브라우저 지원을 원한다면 올바른 방법입니다.

이와 같은 것을 구현하면 더 쉬울 수 있습니다.

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

의 모든 또한 keyCode가 , , charCode 값 과 keyIdentifier가 : 사용되지 않습니다 및 비표준 기능입니다. Chrome 54에서 제거되고 Opera 41.0 은 FF에 일반 문자가있는 키 누르기 이벤트에서 0을 반환합니다.
charCodekeyIdentifier
keyIdentifier
keyCode

주요 속성 :

 readonly attribute DOMString key

누른 키에 해당하는 키 속성 값을 보유합니다.

이 글을 쓰는 시점에서이 key속성은 Firefox 52, Chrome 55, Safari 10.1, Opera 46의 모든 주요 브라우저에서 지원됩니다. Internet Explorer 11 제외 : 비표준 키 식별자 및 AltGraph의 잘못된 동작. 추가 정보
중요하거나 이전 버전과의 호환성이 필요한 경우 다음 코드와 같이 기능 감지를 사용할 수 있습니다.

을 주목하는 것이 key값이 다르다 keyCode거나 which점에서 속성 : 그것은 키가 아닌 해당 코드의 이름이 포함됩니다. 프로그램에 문자 코드가 필요한 경우 charCodeAt(). 인쇄 가능한 단일 문자의 charCodeAt()경우 ArrowUp 기회 와 같이 값에 여러 문자가 포함 된 키를 다루는 경우를 사용할 수 있습니다 . 특수 키를 테스트하고 그에 따라 조치를 취합니다. 그래서 키의 값의 테이블을 구현하는 시도와 해당 코드는 charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27... 등등, 살펴 보시기 바랍니다 키 값 과 해당 코드를

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  */

이전 버전과의 호환성을 고려할 수 있습니다. 즉, 레거시 속성을 사용할 수있는 동안 사용하고 드롭 된 경우에만 새 속성으로 전환 할 수 있습니다.

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

참조 : KeyboardEvent.code속성 문서 및이 답변의 자세한 내용 .

Question 4

TLDR : 나는 당신이하는 것이 좋을 것 해야 새로운 사용 event.key하고 event.code대신 기존의 것들의 속성을. IE와 Edge는 이러한 속성을 지원하지만 아직 새 키 이름을 지원하지 않습니다. 이를 위해 표준 키 / 코드 이름을 출력하는 작은 폴리 필이 있습니다.

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

나는 OP와 동일한 MDN 경고의 이유를 찾기 위해이 질문에 왔습니다. 좀 더 검색하면 문제 keyCode가 더 명확 해집니다.

사용시 문제점 keyCode은 영어가 아닌 키보드가 다른 출력을 생성 할 수 있고 레이아웃이 다른 키보드도 일관성없는 결과를 생성 할 수 있다는 것입니다. 또한,

W3C 사양을 읽는 경우 : https://www.w3.org/TR/uievents/#interface-keyboardevent

실제로 keyCode 및 charCode는 플랫폼간에 일관성이 없으며 다른 운영 체제에서 동일한 구현을 사용하거나 다른 지역화를 사용합니다.

https://www.w3.org/TR/uievents/#legacy-key-attributes에 무엇이 잘못되었는지 설명하는 깊이가 있습니다 keyCode.

이러한 기능은 공식적으로 지정되지 않았으며 현재 브라우저 구현은 상당히 다양합니다. 스크립트 라이브러리를 포함한 많은 양의 레거시 콘텐츠는 사용자 에이전트를 감지하고 그에 따라 작동하므로 이러한 레거시 속성 및 이벤트를 공식화하려는 시도는 수정하거나 활성화 할 수있는만큼의 콘텐츠를 손상시킬 위험이 있습니다. 또한 이러한 속성은 국제적인 사용에 적합하지 않으며 접근성 문제를 해결하지도 않습니다.

따라서 레거시 keyCode가 대체 된 이유를 확인한 후 오늘 수행해야 할 작업을 살펴 보겠습니다.

모든 최신 브라우저는 새 속성 ( key및 code)을 지원합니다 .
IE와 Edge는 일부 키의 이름이 다른 이전 버전의 사양을 지원합니다. 심을 사용할 수 있습니다 : https://github.com/shvaikalesh/shim-keyboard-event-key (또는 직접 굴려-어쨌든 다소 작습니다)
Edge는 최신 릴리스에서이 버그를 수정했습니다 (아마 2018 년 4 월에 릴리스 될 예정 임)-https: //developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/
사용할 수있는 이벤트 키 목록을 참조하십시오. https://www.w3.org/TR/uievents-key/

Question 5

MDN은 이미 솔루션을 제공했습니다.

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

예를 들어 "Enter"키가 클릭되었는지 여부를 감지하려는 경우 :

대신에

event.keyCode === 13

좋아해

event.key === 'Enter'