키보드 이벤트 의 키 코드 분석
5754 단어 keycode
keyup 과 keydown 이벤트 및 keyCode 와 which 속성
키보드 사건 에 관 한 가장 흔히 볼 수 있 는 실례 는 차 로 돌아 가 양식 을 제출 하 는 것 이 라 고 생각 합 니 다. 아마도 모든 전단 에 가슴 에 익숙 한 코드 가 이 기능 을 실현 하 는 데 사 용 될 것 입 니 다.이전에 나 도 단지 이런 기능 을 했 을 뿐, 아마도 그것 의 코드 는 이 랬 을 것 이다.
function enter (p_event) {
var _keyCode = p_event.which ? p_event.which : p_event.keyCode;
var _ENTER_CODE = 13;
if (_ENTER_CODE === _keyCode) {
//enter code...
}
}
ie8 및 이하 호 환 이 필요 하 다 면 이 몇 줄 의 코드 가 필요 합 니 다.
if (typeof p_event === 'undefined') {
p_event = window.event;
}
물론 enter 는 키보드 이벤트 에 연결 해 야 합 니 다. 키보드 사건 은 세 가지 가 있 습 니 다. 저 는 예전 에 keyup [1] 을 사용 하 는 경향 이 있 었 습 니 다. 이런 체험 이 좋 고 사람들의 습관 에 부합 되 며 버튼 을 풀 때 효력 이 발생 합 니 다.그러나 가끔 은 keydown 도 좋 은 선택 입 니 다. 예 를 들 어 사용자 가 빠 른 트리거 를 원 할 때, 예 를 들 어 게임 에서 저 는 WOW 의 플러그 인 이 트리거 스 킬 을 누 르 는 것 으로 수정 되 었 다 는 것 을 기억 합 니 다.
document.getElementById('enter_input').onkeyup = enter;
Enter 가 차 로 돌아 가 는 것 은 괜 찮 을 지 모 르 지만 다른 버튼 은 요?그래서 나 는 테스트 를 해서 몇 가지 문 제 를 발견 했다.
keyup 과 keydown 이벤트 에서:
버튼 번호 의 차이 점:
여기 에는 사실 매우 중요 하지만 많은 사람들 이 알 지 못 한 문제 가 있 습 니 다. 그것 이 바로 다른 사건 keypress 입 니 다. 이 일 은 어떻게 된 일 입 니까?키 다운 과 같다 고 생각 했 을 뿐 이 었 다. 키 보드 를 누 르 면 풀 릴 때 까지 계속 터치 하기 때문이다.그리고 w3 school
onkeypress 이 벤트 는 키보드 버튼 이 눌 리 고 키 가 풀 릴 때 발생 합 니 다.
그러나 최근 에 속성 charCode 를 보 았 는데 저 는 차이 점 을 초보 적 으로 깨 달 았 습 니 다. w3 school 의 말 이 맞지 않 는 것 같 습 니 다.처음에 저 는 charCode 와 keyCode 그리고 which 가 서로 다른 브 라 우 저 에서 이 루어 진 서로 다른 이름 이 라 고 생각 했 지만 charCode 가 mozila 가 만 든 것 같 았 습 니 다. 그러면 다른 2 개 와 어떤 차이 가 있어 야 하 는 지 잘 실험 해서 이 사건 들 과 속성 이 어떻게 된 일 인지 분석 하기 로 했 습 니 다.
먼저 제 가 생각 하 는 가장 강력 한 크롬 에서 테스트 를 해 봤 습 니 다. keypress 사건 에서 만 charCode 가 값 이 있 고 keyup 과 keydown 에서 모두 0 이 라 고 생각 합 니 다. 또한 작은 키보드 구역 의 대부분 버튼 은 keypress 를 촉발 할 수 없고 win 키, ctrl, alt, meta 등 도 촉발 할 수 없다 는 것 을 발 견 했 습 니 다.
위의 테스트 를 통 해 저 는 키 프 레 스 의 의 미 를 발 견 했 습 니 다. 키 프 레 스 는 생산 가능 한 문자 의 버튼 을 눌 렀 을 때 만 작 동 합 니 다. 그래서 키 프 레 스 는 charCode 를 사용 할 수 있 고 charCode 의 의미 도 뚜렷 합 니 다. 키 코드 나 which 버튼 코드 가 아 닌 키 프 레 스 문자 의 코드 입 니 다.
제 이 해 를 더욱 검증 하기 위해 저 는 space, enter 에 모두 charCode 값 이 있 는 것 을 테스트 했 습 니 다. 그리고 작은 키 보드 는 Num Lock 을 밝 힌 후에 charCode 가 생 겼 습 니 다. 그리고 shift 를 누 르 거나 Caps Lock 을 전환 한 후에 charCode 가 문자 의 유 니 코드 값 임 을 증명 할 수 있 습 니 다. 예 를 들 어 'A' 를 누 르 면 소문 자 와 대문자 65, 97 의 구분 이 있 습 니 다.
또한 브 라 우 저의 호환성:
다음 코드 로 시험 할 수 있 습 니 다.
document.body.onkeypress = function (p_event) {
p_event = p_event ? p_event : event;
alert('charCode is ' + p_event.charCode);
}
테스트 과정 에서 리 턴 과 같은 버튼 이 일부 브 라 우 저 행 위 를 촉발 하면 이벤트 방법의 마지막 에 이 코드 를 추가 하 는 것 을 피 할 수 있 습 니 다.
e.preventDefault ? e.preventDefault() : event.returnValue = false;
표준 에 대해 W3C 표준 에서 사실은 which, keyCode 든 charCode 든 모두 추천 하지 않 고 사용 했다. 대신 which 와 keyCode 는 key 이 고 charCode 는 char 이다.안 타 깝 게 도 현재 모든 브 라 우 저 는 키 와 char 를 실현 하지 못 하고 있다.
주 1: 그러나 IE6 는 키 업 을 지원 하지 않 고 키 다운 만 사용 할 수 있 습 니 다.주 2: meta 버튼 은 보통 win 키 옆 에 있 는 마우스 + 하나의 메뉴 스타일 의 버튼 입 니 다. 버튼 은 보통 마우스 오른쪽 버튼 메뉴 를 팝 업 하 는 데 사 용 됩 니 다.
참고 글:
좋은 웹페이지 즐겨찾기
