[javascript] .keyCode와 .which

JAVASCRIPT / 글쓴이

나는 이것이 스택 오버플로 어딘가에 대답 할 것이라고 생각했지만 찾을 수 없습니다.

키 누르기 이벤트를 수신하는 중이 .keyCode거나 .whichEnter 키를 눌렀는지 판별해야합니까?

나는 항상 다음과 같은 일을 해왔다.

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

하지만 .which대신 사용 하는 예제가 표시 됩니다 .keyCode. 차이점이 뭐야? 크로스 브라우저가 다른 브라우저보다 더 친숙한가요?

답변

주 : 대답은 아래 이후 2010 년 여기에 몇 년에 쓰여진, 모두 keyCode와 which찬성되지 않습니다 key(논리적 키) 및 code(키의 물리적 배치를 위해). 하지만 IE는 지원하지 않습니다 code에 대한, 그 지원 key사양의 이전 버전을 기반으로 그렇게 아주 정확하지 않습니다. 이 글을 쓰면서 EdgeHTML과 Chakra를 기반으로하는 현재 Edge는 지원하지 code않지만 Microsoft는 아마도 Blink 및 V8 기반 Edge를 대체 할 것입니다.

일부 브라우저는 사용 keyCode하고 다른 브라우저는 사용 합니다 which.

당신이 jQuery를 사용하는 경우, 당신은 안정적으로 사용할 수있는 whichjQuery를이 같은 일을 표준화 ; 여기 더 있습니다.

jQuery를 사용하지 않는 경우 다음을 수행 할 수 있습니다.

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

또는 대안으로 :

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

… 가능성 처리하는 e.which수 있습니다 0(즉를 복원하여 0사용, 마지막에 자바 스크립트의 호기심 강력한 ||연산자 ).

답변

jQuery를이 normalises event.which여부에 따라 event.which, event.keyCode또는 event.charCode브라우저에 의해 지원됩니다

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

또 다른 이점은 .whichjQuery가 마우스 클릭에도 적용한다는 것입니다.

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

답변

바닐라 자바 ​​스크립트를 사용하는 경우 keyCode는 더 이상 사용되지 않으며 삭제됩니다.

이 기능은 웹 표준에서 제거되었습니다. 일부 브라우저는 여전히이를 지원할 수 있지만 삭제되는 중입니다. 사용하지 말고 가능한 경우 기존 코드를 업데이트하십시오. 결정을 안내하려면이 페이지 하단의 호환성 표를 참조하십시오. 이 기능은 모든 팀에서 작동을 멈출 수 있습니다

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

대신 원하는 동작에 따라 .key 또는 .code를 사용 하십시오 .
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
https://developer.mozilla.org/ko -미국 / 문서 / 웹 / API / 키보드 이벤트 / 키

둘 다 최신 브라우저에서 구현됩니다.

답변

이것을보십시오 : https://developer.mozilla.org/en-US/docs/Web/API/event.keyCode

키 누르기 이벤트에서 누른 키의 유니 코드 값은 keyCode 또는 charCode 속성에 저장되며 둘다는 아닙니다. 누른 키가 문자 (예 : ‘a’)를 생성하면 charCode는 문자 대소 문자를 기준으로 해당 문자의 코드로 설정됩니다. (즉, charCode는 Shift 키를 누르고 있는지 여부를 고려합니다). 그렇지 않으면, 누른 키의 코드가 keyCode에 저장됩니다. keyCode는 항상 keydown 및 keyup 이벤트에서 설정됩니다. 이 경우 charCode는 설정되지 않습니다. keyCode 또는 charCode에 저장되어 있는지 여부에 관계없이 키 코드를 얻으려면 which 속성을 쿼리하십시오. IME를 통해 입력 한 문자는 keyCode 또는 charCode를 통해 등록되지 않습니다.

답변

나는 추천 할 것이다 event.key 현재 합니다. MDN 문서 : https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

event.KeyCode그리고 event.which둘 다 MDN 페이지 상단에 더 이상 사용되지 않는 경고가 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
https://developer.mozilla.org/en-US / docs / Web / API / KeyboardEvent / which

영숫자 키의 경우 event.key 모든 브라우저에서 동일하게 구현 된 것으로 보입니다. 컨트롤 키 (탭, 입력, 이스케이프 등)의 경우 event.keyChrome / FF / Safari / Opera에서 값이 같지만 IE10 / 11 / Edge에서는 값이 다릅니다 (IE는 이전 버전의 사양을 사용하지만 서로 일치합니다. 2018 년 1 월 14 일).

영숫자 키의 경우 검사는 다음과 같습니다.

event.key === 'a'

제어 문자의 경우 다음과 같은 작업을 수행해야합니다.

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

여러 브라우저에서 테스트하기 위해 여기 예제를 사용했습니다 (IE10에서 작동하도록 코드 펜으로 열고 편집해야했습니다). https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ 암호

event.code 가능성이 다른 답변으로 언급되었지만 IE10 / 11 / Edge는 구현하지 않으므로 IE 지원을 원하는지 여부입니다.

답변

입력 된 키보드 입력 및 키 조합을 캡처하기위한 강력한 Javascript 라이브러리 종속성이 없습니다.

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

단축키는 다음과 같은 수식을 이해 : ⇧, shift, option, ⌥, alt, ctrl, control, command, 및⌘ .

다음 특수 키는 바로 가기를 사용할 수 있습니다 : backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete과 f1를 통해 f19.

답변

Firefox에서 keyCode 속성은 onkeypress 이벤트에서 작동하지 않습니다 (0 만 반환 함). 크로스 브라우저 솔루션의 경우, KeyCode와 함께 which 특성을 사용하십시오. 예 :

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