1부: 브라우저 키 이벤트
js로 키 로깅을 구현하려면 브라우저의 세 가지 주요 이벤트 유형인 keydown, keypress 및 keyup에 주의해야 합니다. 이는 각각 onkeydown, onkeypress 및 onkeyup의 세 가지 이벤트 핸들에 해당합니다. 일반적인 키 누르기는 keydown, keypress, 키를 놓을 때 keyup 순서로 세 가지 이벤트를 모두 생성합니다.
이 세 가지 이벤트 유형 중 keydown 및 keyup은 상대적으로 낮은 수준인 반면, keypress는 상대적으로 고급입니다. 여기서 소위 고급이란 사용자가 Shift + 1을 누르면 키 누르기가 키 이벤트를 구문 분석하고 인쇄 가능한 "!" 문자를 반환하는 반면, keydown 및 keyup은 Shift + 1 이벤트만 기록한다는 의미입니다. [1]
그러나 키 누르기는 인쇄 가능한 일부 문자에만 유효합니다. F1-F12, Backspace, Enter, Escape, PageUP, PageDown 및 화살표 방향과 같은 기능 키의 경우 keypress 이벤트가 발생하지 않지만 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"를 사용하여 이 변수를 나타냅니다.
기능 키다운(e)
e 변수는 키 입력 이벤트를 나타냅니다. 어떤 키를 눌렀는지 찾으려면 which 속성을 사용하세요.
e.어떤
e.키의 인덱스 값을 제공합니다. 인덱스 값을 키의 영숫자 값으로 변환하는 방법에는 다음과 같이 정적 함수 String.fromCharCode()를 사용해야 합니다.
String.fromCharCode(e.which)
위의 명령문을 종합하면 FireFox에서 어떤 키를 눌렀는지 알 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
함수 keyDown(e) {
var 키코드 = e.which;
var realkey = String.fromCharCode(e.which);
Alert("키코드: " + 키코드 + " 문자: " + 실제키);
}
document.onkeydown = keyDown;
2.3 IE 구현 방법
IE 프로그램에는 e 변수가 필요하지 않습니다. e.which 대신 window.event.keyCode를 사용합니다. 키 인덱스 값을 실제 키 값으로 변환하는 방법은 String.fromCharCode(event.keyCode)와 비슷합니다. 다음과 같습니다:
다음과 같이 코드 코드를 복사합니다.
함수 키다운() {
var 키코드 = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
Alert("키코드: " + 키코드 + " 문자: " + 실제키);
}
document.onkeydown = keyDown;
2.4 브라우저 유형 결정
위에서 다양한 브라우저에서 주요 이벤트 객체를 얻는 방법을 배웠습니다. 그런 다음 브라우저 유형을 결정해야 합니다. 몇 가지 방법이 이해하기 쉽고, 먼저 일반적인 방법에 대해 이야기해 보겠습니다. : navigator 객체의 appName 속성을 사용합니다. 물론 userAgent 속성을 사용할 수도 있습니다. 여기서 appName은 브라우저 유형을 결정하는 데 사용됩니다. IE 및 Maxthon의 appName은 "Microsoft Internet Explorer"입니다. , FireFox와 Opera의 appName은 "Netscape"이므로 비교적 간단한 기능을 가진 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
함수 키업(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var 키코드 = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}또 다른
{
var 키코드 = e.which;
var realkey = String.fromCharCode(e.which);
}
Alert("키코드: " + 키코드 + " 문자: " + 실제키);
}
document.onkeyup = 키업;
더 간단한 방법은 [2]입니다.
다음과 같이 코드 코드를 복사합니다.
함수 키업(e) {
var currKey=0,e=e||이벤트;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
Alert("키 코드: " + currKey + " 문자: " + keyName);
}
document.onkeyup = 키업;
위의 방법이 더 영리합니다. 간단히 설명하겠습니다.
우선, e=e||event; 코드는 브라우저 이벤트 객체 획득과의 호환성을 위한 것입니다. js에서 이 코드의 의미는 숨겨진 변수 e가 FireFox 또는 Opera에 있으면 e||event가 e를 반환한다는 것입니다. 숨겨진 변수 e가 IE에 없으면 event가 반환됩니다.
둘째, currKey=e.keyCode | Opera에는 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 이벤트는 기능 키에 가장 유용한 반면, keypress 이벤트는 인쇄 가능한 키에 가장 유용하다는 일반적인 규칙이 있습니다[3].
키보드 로깅은 주로 인쇄 가능한 문자 및 일부 기능 키에 대한 것이므로 keypress가 첫 번째 선택입니다. 그러나 첫 번째 부분에서 언급했듯이 IE의 keypress는 기능 키를 지원하지 않으므로 이를 보완하기 위해 keydown/keyup 이벤트를 사용해야 합니다.
3.3 코드 구현
일반적인 아이디어는 keypress 이벤트 객체를 사용하여 키 문자를 얻고, keydown 이벤트를 사용하여 Enter, Backspace 등과 같은 기능 문자를 얻는 것입니다.
코드 구현은 다음과 같습니다
다음과 같이 코드 코드를 복사합니다.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 전환//EN">
<HTML>
<HEAD><TITLE>js 키 입력 기록</TITLE>
<META NAME="생성기" CONTENT="EditPlus">
<META NAME="저자" CONTENT="유상런">
<META NAME="키워드" CONTENT="js 키 입력 기록">
<META NAME="Description" CONTENT="js 키 입력 기록">
</HEAD>
<본문>
<스크립트 유형="텍스트/자바스크립트">
var keystring = "";//키 문자열 기록
함수 $(s){return document.getElementById(s)?document.getElementById(s):s;}
기능 키 누르기(e)
{
var currKey=0,CapsLock=0,e=e||이벤트;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
스위치(currKey)
{
//백스페이스, 탭, 캐리지 리턴, 스페이스, 방향 키 및 삭제 키를 차단합니다.
사례 8: 사례 9: 사례 13: 사례 32: 사례 37: 사례 38: 사례 39: 사례 40: 사례 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey);
}
키스트링 += 키이름;
}
기능 키다운(e)
{
var e=e||이벤트;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
스위치(currKey)
{
사례 8: keyName = "[Backspace]";
사례 9: keyName = "[표]" break;
사례 13:keyName = "[Enter]" break;
사례 32:keyName = "[space]" break;
사례 33:keyName = "[PageUp]" break;
사례 34:keyName = "[PageDown]" break;
사례 35:keyName = "[끝]" break;
사례 36:keyName = "[홈]" break;
사례 37:keyName = "[왼쪽 화살표 키]" break;
case 38:keyName = "[위 화살표 키]" break;
case 39:keyName = "[오른쪽 화살표 키]" break;
case 40:keyName = "[아래 화살표 키]" break;
사례 46:keyName = "[삭제]" break;
기본값:키이름 = "";
}
키스트링 += 키이름;
}
$("content").innerHTML=키스트링;
}
기능 키업(e)
{
$("content").innerHTML=키스트링;
}
document.onkeypress=키프레스;
document.onkeydown =keydown;
document.onkeyup =키업;
</script>
<입력 유형="텍스트" />
<input type="button" value="기록 지우기" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>키보드 응답 키 값을 보려면 아무 키나 누르십시오: <span id="content"></span>
</BODY>
</HTML>
코드 분석:
$(): ID를 기반으로 dom 가져오기
keypress(e): 문자 코드 차단을 구현합니다. 기능 키는 keydown을 사용하여 얻어야 하므로 이러한 기능 키는 키 누르기에서 차단됩니다.
keydown(e): 주로 기능 키 획득을 실현합니다.
keyup(e): 가로채는 문자열을 표시합니다.