.keyCode와 .which
나는 이것이 스택 오버플로 어딘가에 대답 할 것이라고 생각했지만 찾을 수 없습니다.
키 누르기 이벤트를 수신하는 중이 .keyCode
거나 .which
Enter 키를 눌렀는지 판별해야합니까?
나는 항상 다음과 같은 일을 해왔다.
$("#someid").keypress(function(e) {
if (e.keyCode === 13) {
e.preventDefault();
// do something
}
});
그러나 .which
대신 사용 하는 예제가 표시 됩니다 .keyCode
. 차이점이 뭐야? 크로스 브라우저가 다른 브라우저보다 더 친숙한가요?
일부 브라우저는 사용 keyCode
하고 다른 브라우저는 사용 합니다 which
. 당신이 jQuery를 사용하는 경우, 당신은 안정적으로 사용할 수있는 which
jQuery를이 같은 일을 표준화 . 여기 더 있습니다.
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;
}
또 다른 이점은 .which
jQuery가 마우스 클릭에도 적용한다는 것입니다.
// 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.key
Chrome / 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
참고 URL : https://stackoverflow.com/questions/4471582/keycode-vs-which
'Programing' 카테고리의 다른 글
Eclipse가 새 프로젝트를 만들 때마다 appcompat v7 라이브러리 지원을 자동으로 추가하는 이유는 무엇입니까? (0) | 2020.04.26 |
---|---|
CSS 플로트를 한 줄로 유지하려면 어떻게합니까? (0) | 2020.04.26 |
Chrome 개발 도구 네트워크 탭에 표시된 '요청 페이로드'와 '양식 데이터'의 차이점 (0) | 2020.04.26 |
Android에서 "가상 키보드 표시 / 숨기기"이벤트를 캡처하는 방법은 무엇입니까? (0) | 2020.04.26 |
케이스 오브젝트와 오브젝트의 차이점 (0) | 2020.04.26 |