자바스크립트 키 이벤트(모든 브라우저와 호환)_javascript 기술

1부: 브라우저 주요 이벤트

js를 사용하여 키 로깅을 구현하려면 브라우저의 세 가지 주요 이벤트 유형인 keydown, keypress 및 keyup에 주의해야 합니다. 이는 각각 onkeydown, onkeypress 및 onkeyup의 세 가지 이벤트 핸들에 해당합니다. 일반적인 키 누르기는 keydown, keypress, 키를 놓을 때 keyup 순서로 세 가지 이벤트를 모두 생성합니다.

이 세 가지 이벤트 유형 중 keydown과 keyup은 상대적으로 낮은 수준인 반면, keypress는 상대적으로 고급입니다. 여기서 소위 고급이란 사용자가 Shift 1을 누르면 키 누르기가 키 이벤트를 구문 분석하고 인쇄 가능한 "!" 문자를 반환하는 반면, keydown 및 keyup은 Shift 1 이벤트만 기록한다는 의미입니다. [1]

그러나 키 누르기는 인쇄할 수 있는 일부 문자에만 유효합니다. F1-F12, 백스페이스, Enter, Escape, PageUP, PageDown 및 화살표 방향과 같은 기능 키의 경우 키 누르기 이벤트가 생성되지 않지만 가능합니다. keydown 및 keyup 이벤트가 생성됩니다. 그러나 FireFox에서는 기능 키가 키 누르기 이벤트를 생성할 수 있습니다.

keydown, keypress 및 keyup 이벤트 핸들러에 전달된 이벤트 객체에는 몇 가지 공통 속성이 있습니다. Alt, Ctrl 또는 Shift를 키와 함께 누르면 이는 FireFox 및 IE에 공통되는 이벤트의 altKey, ctrlKey 및 ShiftKey 속성으로 표시됩니다.

2부: 호환 가능한 브라우저

브라우저와 관련된 모든 js는 브라우저 호환성 문제를 고려해야 합니다.
현재 일반적으로 사용되는 브라우저는 주로 IE와 Mozilla를 기반으로 합니다. Maxthon은 IE 커널을 기반으로 하며 FireFox와 Opera는 Mozilla 커널을 기반으로 합니다.

2.1 이벤트 초기화

가장 먼저 알아야 할 것은 이벤트 초기화 방법입니다.

함수 keyDown(){}
document.onkeydown = keyDown;

브라우저가 이 명령문을 읽으면 키보드의 어떤 키를 누르든 KeyDown() 함수가 호출됩니다.

2.2 FireFox와 Opera 구현 방법

FireFox, Opera 등의 프로그램은 IE보다 구현하기가 더 까다롭기 때문에 여기서 먼저 설명하겠습니다.

keyDown() 함수에는 숨겨진 변수가 있습니다. 일반적으로 문자 "e"를 사용하여 이 변수를 나타냅니다.

기능 keyDown(e)

변수 e는 어떤 키를 눌렀는지 확인하려면 which 속성을 사용하세요.

e. which

키의 인덱스 값을 제공하는 e.인덱스 값을 키의 영숫자 값으로 변환하려면 다음과 같이 정적 함수 String.fromCharCode()를 사용해야 합니다.

String.fromCharCode(e.which)

위 명령문을 종합하면 FireFox에서 어떤 키가 눌렸는지 알 수 있습니다.

코드 복사 코드는 다음과 같습니다. :

function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which)
Alert( "키코드: " keycode " 문자: " realkey);
　 }
　 document.onkeydown = keyDown;

2.3 IE 구현 방법 IE 프로그램에는 e 변수가 필요하지 않습니다. e.which 대신 window.event.keyCode를 사용하세요. 키 인덱스 값을 실제 키 값으로 변환하는 방법은 String.fromCharCode(event.keyCode)와 비슷합니다. 프로그램은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function keyDown( ) {
var keycode = event.keyCode ;
　 var realkey = String.fromCharCode(event.keyCode);
Alert("키코드: " keycode " 문자:
　 }
document.onkeydown = keyDown;

2.4 브라우저 유형 결정 위에서 다양한 브라우저에서 주요 이벤트 개체를 얻는 방법을 배웠습니다. 이제 브라우저 유형을 결정해야 하며, 일부는 이해하기 쉽고 일부는 매우 영리합니다. 방법: navigator 객체의 appName 속성을 사용합니다. 물론 userAgent 속성을 사용할 수도 있습니다. 여기서 appName은 IE 및 Maxthon의 appName이 "Microsoft Internet Explorer"입니다. FireFox와 Opera는 "Netscape"이므로 비교적 간단한 기능을 가진 코드는 다음과 같습니다.

코드를 복사하세요 다음과 같습니다:

function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode; var realkey = String. .keyCode);
　 　 }else
　 　　 var keycode = e.which; "키코드: " keycode " 문자: " realkey);
더 간단한 방법은 [2]입니다:




코드 복사

코드는 다음과 같습니다.

함수 keyUp(e) { var currKey=0,e=e| |event; currKey=e.keyCode||e.which||e.charCode; fromCharCode(currKey); Alert("키 코드: " currKey " 문자: " keyName); 　 } 　 document.onkeyup = keyUp;

간단하게 설명하자면:
먼저 e=e||event; 이 코드는 브라우저 이벤트 객체 획득과의 호환성을 위한 것입니다. js에서 이 코드의 의미는 숨겨진 변수 e가 FireFox 또는 Opera에 있으면 e||event가 e를 반환한다는 것입니다. 숨겨진 변수 e가 IE에 없으면 event가 반환됩니다.
두 번째로, currKey=e.keyCode||e.which||e.charCode; 이 문장은 브라우저 키 이벤트 개체의 키 코드 속성과 호환됩니다(자세한 내용은 3부 참조). IE에는 keyCode 속성만 있는 반면 FireFox에는 which 및 charCode 속성이 있고 Opera에는 keyCode 및 which 속성 등이 있습니다.

위 코드는 브라우저에서만 호환되고, keyup 이벤트 객체를 얻어와서 단순히 키코드와 키문자만 팝업으로 뜨는데, 키를 누르면 문자키가 모두 대문자로 되어 있고, 문제가 발생합니다. Shift 키를 누르면 표시되는 문자가 매우 이상하므로 코드를 최적화해야 합니다.



3부: 코드 구현 및 최적화

3.1 키 이벤트의 키코드 및 문자코드

키 이벤트의 키 코드와 문자 코드는 브라우저 간 이식성이 부족합니다. 브라우저마다, 케이스 이벤트마다 키 코드와 문자 코드의 저장 방법이 다릅니다... .IE에서는 하나만 있습니다. keyCode 속성은 이벤트 유형에 따라 해석됩니다. keydown의 경우 keyCode는 키 누르기 이벤트의 경우 문자 코드를 저장합니다. IE에는 which 및 charCode 속성이 없으므로 which 및 charCode 속성은 항상 정의되지 않습니다. FireFox의 keyCode는 항상 0입니다. 시간이 keydown/keyup일 때 charCode=0이 키 코드입니다. 이벤트 키누름이 발생하면 charCode와 해당 값이 동일하며, 문자코드가 저장된다.

Opera에서는 keyCode의 값이 항상 동일합니다. keydown/keyup 이벤트에서는 키를 누를 때 문자 코드를 저장하며 charCode는 정의되지 않습니다. 항상 정의되지 않았습니다.

3.2 keydown/keyup을 사용해야 할까요, 아니면 keypress를 사용해야 할까요

첫 번째 부분에서는 keydown/keyup과 keypress의 차이점을 소개했습니다. keydown 이벤트는 기능 키에 가장 유용한 반면, keypress 이벤트는 인쇄 가능한 키에 가장 유용하다는 일반적인 규칙이 있습니다[3].

키보드 로깅은 주로 인쇄 가능한 문자 및 일부 기능 키에 대한 것이므로 keypress가 첫 번째 선택입니다. 그러나 첫 번째 부분에서 언급했듯이 IE의 keypress는 기능 키를 지원하지 않으므로 keydown/keyup 이벤트를 사용하여 보완해야 합니다. 그것.

3.3 코드 구현

일반적인 아이디어는 keypress 이벤트 객체를 사용하여 키 문자를 얻고, keydown 이벤트를 사용하여 Enter, Backspace 등과 같은 기능 문자를 얻는 것입니다.

코드 구현은 다음과 같습니다

코드 복사
코드는 다음과 같습니다

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">