js 키보드 이벤트의 포괄적인 제어에 대한 간략한 토론

주로 네 부분으로 나누어짐

1부: 브라우저 주요 이벤트
2부: 호환 브라우저
3부: 코드 구현 및 최적화
4부: 요약

1부: 브라우저 키 이벤트

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

이 세 가지 이벤트 유형 중 keydown과 keyup은 상대적으로 낮은 수준이고 keypress는 상대적으로 고급입니다. 여기서 소위 고급이란 사용자가 Shift + 1, keypress는 키 이벤트를 구문 분석하고 인쇄 가능한 "!" 문자를 반환하는 반면, 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 이벤트 초기화

가장 먼저 알아야 할 것은 이벤트 초기화 방법입니다. 기본 구문은 다음과 같습니다.

 function keyDown(){}
　　 document.onkeydown = keyDown;

브라우저가 실행될 때. 눌려졌는지 여부에 관계없이 이 명령문을 읽습니다. 키보드에서 어떤 키를 누르든 KeyDown() 함수가 호출됩니다.

2.2 FireFox 및 Opera 구현 방법

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

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

기능 keyDown(e)

변수 e는 키 입력 이벤트를 나타냅니다. 어떤 키가 눌렸는지 찾으려면 which 속성을 사용하세요.

e.어느

키의 인덱스 값을 제공하는 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.4 브라우저 유형 결정

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

function keyUp(e) 
{   　　   　　 
if(navigator.appName == "Microsoft Internet Explorer") 　　   　　 
{ 　　   　　  　　
var keycode = event.keyCode;  　　   　　  　　
var realkey = String.fromCharCode(event.keyCode);  　　   　　  
}else　　   　　  
{ 　　   　　  　　  
var keycode = e.which;  　　   　　 　 　 
var realkey = String.fromCharCode(e.which);  　　  　　  
} 　　  　　  
alert("按键码: " + keycode + " 字符: " + realkey); 　　  　
} 　　   
document.onkeyup = keyUp;

더 간단한 방법은 [2]입니다.

 function keyUp(e) 
 { 　　    　 
 var currKey=0,e=e||event; 　　   　  
 currKey=e.keyCode||e.which||e.charCode; 　　   　　
 var keyName = String.fromCharCode(currKey); 　　    　 
 alert("按键码: " + currKey + " 字符: " + keyName); 　　    
 } 　　    
 document.onkeyup = keyUp;

위 이 방법이 더 영리합니다.

우선, 이 코드는 브라우저 이벤트 객체 획득과의 호환성을 위한 것입니다. 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는 For 키 코드를 저장합니다. 키 누르기 이벤트의 경우 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"> 
<HTML> 
<HEAD><TITLE>js 按键记录</TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT="羽殇仁"> 
<META NAME="Keywords" CONTENT="js 按键记录"> 
<META NAME="Description" CONTENT="js 按键记录"> 
</HEAD> 
<BODY> 
<script type="text/javascript"> 
var keystring = "";//记录按键的字符串 function $(s){return document.getElementByIdx_x(s)?document.getElementByIdx_x(s):s;} 
function keypress(e) 
{ 　 
var currKey=0,CapsLock=0,e=e||event; 　  
currKey=e.keyCode||e.which||e.charCode; 　 
CapsLock=currKey>=65&&currKey<=90; 　 
switch(currKey) 　 
{   　 　 
//屏蔽了退格、制表、回车、空格、方向键、删除键   　 　
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;   　 　 
default:keyName = String.fromCharCode(currKey); break; 　 
} 　 
keystring += keyName; 
} 
function keydown(e) 
{ 　 
var e=e||event; 　 
var currKey=e.keyCode||e.which||e.charCode; 　 
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47)) 　 
{ 　 　  
switch(currKey)   　 　 
{   　 　 　 
case 8: keyName = "[退格]"; break;   　 　 　 
case 9: keyName = "[制表]"; break;   　 　 　 
case 13:keyName = "[回车]"; break;   　 　 　 
case 32:keyName = "[空格]"; break;   　 　 　 
case 33:keyName = "[PageUp]";  break;   　 　 　 
case 34:keyName = "[PageDown]";  break;   　 　 　 
case 35:keyName = "[End]";  break;   　 　 　 
case 36:keyName = "[Home]";  break;   　 　 　 
case 37:keyName = "[方向键左]";  break;   　 　 　 
case 38:keyName = "[方向键上]";  break;   　 　 　 
case 39:keyName = "[方向键右]";  break;   　 　　  
case 40:keyName = "[方向键下]";  break;   　 　 　 
case 46:keyName = "[删除]";  break;   　 　 　 
default:keyName = "";  break; 　 　  
} 　 　  keystring += keyName; 　
 } 　 
 $("content").innerHTML=keystring; 
 } 
 function keyup(e) 
 { 　 
 $("content").innerHTML=keystring; 
 } 
 document.onkeypress=keypress; 
 document.onkeydown =keydown; 
 document.onkeyup =keyup; 
 </script> 
 <input type="text" /> 
 <input type="button" value="清空记录" onclick="$(&#39;content&#39;).innerHTML = &#39;&#39;;keystring = &#39;&#39;;"/> 
 <br/>请按下任意键查看键盘响应键值：<span id="content"></span> 
 </BODY> 
 </HTML>

代码分析：

$()：根据ID获取dom

keypress(e)：实现对字符码的截获，由于功能按键要用keydown获取，所以在keypress中屏蔽了这些功能按键。

keydown(e)：主要是实现了对功能按键的获取。

keyup(e)：展示截获的字符串。

代码基本上就算实现完成了！呵呵

第四部分：总结

编写代码的最初目的是能够通过js记录按键，并返回一个字符串。

上述代码只是用js实现了基本的英文按键记录，对于汉字是无能为力，记录汉字，我能想到的办法，当然是用js，是用keydown和keyup记录底层按键事件，汉字解析当然无能为力。当然你可以用DOM的方式直接获取input中的汉字，但这已经离开了本文讨论的用按键事件实现按键记录的本意。

上述代码还可以实现添加剪切板的功能，监控删除的功能等等。。。

这篇浅谈js键盘事件全面控制就是小编分享给大家的全部内容了，希望能给大家一个参考，