Eine kurze Diskussion zur umfassenden Steuerung von JS-Tastaturereignissen

Hauptsächlich in vier Teile unterteilt

Teil 1: Browser-Schlüsselereignisse
Teil 2: Kompatible Browser
Teil 3: Codeimplementierung und -optimierung
Teil 4: Zusammenfassung

Teil 1: Browser-Tastenereignisse

Wenn Sie js zum Implementieren von Keylogging verwenden, sollten Sie auf die drei wichtigsten Ereignistypen des Browsers achten, nämlich Keydown, Keypress und Keyup, die jeweils Onkeydown, Keypress und Keyup entsprechen. Die drei Ereignisse behandeln onkeypress und onkeyup. Ein typischer Tastendruck erzeugt alle drei Ereignisse in der Reihenfolge „Taste drücken“, „Taste drücken“ und dann „Taste hoch“, wenn die Taste losgelassen wird.

Von diesen drei Ereignistypen sind Keydown und Keyup relativ niedrig, während Keypress relativ fortgeschritten ist. Das sogenannte Erweitert bedeutet hier, dass der Benutzer die Umschalttaste + drückt 1, keypress analysiert das Tastenereignis und gibt ein druckbares „!“-Zeichen zurück, während keydown und keyup nur das Shift + 1-Ereignis aufzeichnen. [1]

Aber der Tastendruck ist nur für einige Zeichen wirksam, die gedruckt werden können, und für Funktionstasten wie F1-F12, Rücktaste, Eingabetaste, Escape, PageUP, PageDown und Pfeilrichtung generieren keine Tastendruckereignisse, es können jedoch Keydown- und Keyup-Ereignisse generiert werden. In FireFox können Funktionstasten jedoch Tastendruckereignisse generieren.

Die an die Ereignishandler keydown, keypress und keyup übergebenen Ereignisobjekte haben einige gemeinsame Eigenschaften. Wenn Alt, Strg oder Umschalt zusammen mit einer Taste gedrückt werden, wird dies durch die Eigenschaften altKey, ctrlKey und shiftKey des Ereignisses dargestellt, die in FireFox und IE üblich sind.

Teil 2: Browserkompatibilität

Alle Js, die Browser beinhalten, müssen Browserkompatibilitätsprobleme berücksichtigen.

Derzeit häufig verwendete Browser basieren hauptsächlich auf IE und basieren auf Mozilla. Maxthon basiert auf dem IE-Kernel, während Firefox und Opera auf dem Mozilla-Kernel basieren.

2.1 Initialisierung des Ereignisses

Das erste, was Sie wissen müssen, ist, wie Sie das Ereignis initialisieren. Die grundlegende Anweisung lautet wie folgt:

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

Wenn der Browser liest diese Anweisung, unabhängig davon, ob sie gedrückt wird. Welche Taste auf der Tastatur auch immer gedrückt wird, die Funktion KeyDown() wird aufgerufen.

2.2 Implementierungsmethoden von FireFox und Opera

Die Implementierung von Programmen wie FireFox und Opera ist schwieriger als die von IE, daher werde ich sie hier zuerst beschreiben.

Die Funktion keyDown() hat eine versteckte Variable – im Allgemeinen verwenden wir den Buchstaben „e“, um diese Variable darzustellen.

Funktion keyDown(e)

Die Variable e stellt ein Tastendruckereignis dar. Um herauszufinden, welche Taste gedrückt wurde, verwenden Sie das which-Attribut:

e.which

e.die den Indexwert des Schlüssels angibt. Die Methode zum Konvertieren des Indexwerts in den alphanumerischen Wert des Schlüssels erfordert die Verwendung der statischen Funktion String.fromCharCode() wie folgt:

String.fromCharCode(e.which)

Wenn wir die obigen Aussagen zusammenfügen, können wir herausfinden, welche Taste in Firefox gedrückt wurde:

function keyDown(e) 
{  　　  　　  
var keycode = e.which;  　　 　　  
var realkey = String.fromCharCode(e.which);  　　 　　  
alert("按键码: " + keycode + " 字符: " + realkey);  　　  
} 　　  
document.onkeydown = keyDown;

2.4 Bestimmen des Browsertyps

Oben Jetzt wissen wir, wie man es erhält Bei wichtigen Ereignisobjekten in verschiedenen Browsern müssen wir den Browsertyp bestimmen. Es gibt viele Methoden, einige sind einfacher zu verstehen und andere sind sehr clever. Lassen Sie uns zunächst über die allgemeine Methode sprechen: Natürlich können Sie auch den appName verwenden Attribut des Navigatorobjekts Sie können auch das Attribut userAgent verwenden. Hier wird appName verwendet, um den Browsertyp zu bestimmen Der App-Name von Maxthon ist „Microsoft Internet Explorer“. , und der App-Name von Firefox und Opera ist „Netscape“, daher lautet ein relativ einfacher Code wie folgt:

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;

Die einfachere Methode ist [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;

Das Obige Diese Methode ist cleverer. Lassen Sie es uns kurz erklären:

Zuallererst dient e=e||event; der Kompatibilität mit der Erfassung von Browser-Ereignisobjekten. Die Bedeutung dieses Codes in js ist, dass, wenn die versteckte Variable e in FireFox oder Opera existiert, e||event e zurückgibt. Wenn die versteckte Variable e im IE nicht existiert, wird event zurückgegeben.

Zweitens: currKey=e.keyCode||e.which||e.charCode; Dieser Satz muss mit dem Schlüsselcodeattribut des Browser-Schlüsselereignisobjekts kompatibel sein (Einzelheiten finden Sie in Teil 3), z Wie im IE gibt es nur das KeyCode-Attribut, während FireFox die Attribute which und charCode hat, Opera hat keyCode und which-Attribute usw.

Der obige Code ist nur mit dem Browser kompatibel, ruft das Keyup-Ereignisobjekt ab und zeigt einfach den Tastencode und die Tastenzeichen an. Beim Drücken einer Taste treten jedoch alle Zeichen auf in Großbuchstaben, und wenn Sie beim Drücken der Umschalttaste drücken, sind die angezeigten Zeichen sehr seltsam, daher muss der Code optimiert werden.

Teil 3: Code-Implementierung und -Optimierung

3.1 Schlüsselcode und Zeichencode für Schlüsselereignisse

Im IE gibt es nur ein keyCode-Attribut und seine Interpretation hängt vom Ereignis ab Typ. Für Keydown speichert keyCode den Schlüsselcode Für Tastendruckereignisse speichert keyCode einen Zeichencode. Im IE gibt es keine which- und charCode-Attribute, daher sind die which- und charCode-Attribute immer undefiniert.

Der keyCode in Firefox ist immer 0. Wenn die Zeit keydown/keyup ist, ist charCode=0, was der Schlüsselcode ist. Wenn das Ereignis Tastendruck auftritt, sind die Werte von which und charCode gleich und der Zeichencode wird gespeichert.

In Opera sind die Werte von keyCode und immer gleich. Im Keydown-/Keyup-Ereignis speichern sie den Tastencode, im Gegensatz zu charCode definiert und ist immer undefiniert.

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键盘事件全面控制就是小编分享给大家的全部内容了，希望能给大家一个参考，