JS keyboard kind of event, compatibility and optimization

First, a summary of key events browser

Three kinds of key event types to achieve keyloggers with js, pay attention to the browser, that keydown, keypress and keyup, which correspond onkeydown, onkeypress and onkeyup three event handlers. A typical button will produce all three events, followed by keydown, keypress, then release the button when the keyup.
In these three types of events, keydown and keyup compare the bottom, while the more advanced keypress. Here the so-called high-level refers to the time when the user presses shift + 1, keypress return "!" Character a printable after this key event parsing, and keydown and keyup just shift + 1 recorded this event. But keypress only for some of the characters can be printed out effectively, and for function keys, such as F1-F12, Backspace, Enter, Escape, PageUP, PageDown and direction arrows, etc., will not generate keypress events, but can produce keydown and keyup event. However, in FireFox, the function keys can generate keypress events.
Passed to the keydown, keypress event object and keyup event handlers have some common attributes. If the Alt, Ctrl, and a Shift key is pressed or together, by which altKey events, properties, and shiftKey ctrlKey represented, these attributes are common in FireFox and IE.

Second, compatible browsers

All involved browser js, we should consider browser compatibility issues. The most commonly used are mainly based on the IE browser and Mozilla-based two categories. IE, Maxthon (non-speed version), the browser 360 (non-speed version) is a kernel based on IE, Opera and FireFox and Mozilla-based core.
1, initialization event
you first need to know is how to initialize the event, the basic statement is as follows:
　　 function keyDown () {}
　　 document.onkeydown = keyDown;
when the browser reads this statement, regardless of which key on the keyboard is pressed, all call the KeyDown () function.
2, FireFox and Opera's implementation
FireFox and Opera and other procedures to achieve than IE trouble, first describe here. keyDown () function has a hidden variable - in general, we use the letter "e" to represent the variables.
　　 function keyDown (e)
variable e represents the keystroke events, looking for which key is pressed, to use the which this property:
　　 e.which
e.which will be given of the value of the index keys, the index value is converted into the key the method of letters or numerical values need to use the String.fromCharCode static function (), as follows:
　　 the String.fromCharCode (e.which)
the above statement together, we can get in FireFox which was pressed a key:

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

3, implementation of IE
IE does not need a program variable e, instead of using window.event.keyCode e.which, similar to the index value of the key into real key method: String.fromCharCode (event.keyCode), the following procedure :

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

4, to determine browser type
above understanding of the method in a variety of browsers is how to obtain the key event object, then the following need to determine browser type, this method a lot, there are relatively easy to understand, but also very clever way, first said the general method: is the use of the navigator object of appName property, of course, can also be used userAgent property, here appName be implemented to determine the type of browser, IE and Maxthon's appName is "Microsoft Internet Explorer", and FireFox and Opera appName is " Netscape ", it is a relatively simple function of the code is as follows:

 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;
比较简洁的方法是：
　　      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;

The above method is relatively clever, simple to explain:

First of all, e = e || event; the purpose of this code is compatible browser event object obtained. js the meaning of this code is that if FireFox or Opera, is the presence of hidden variable e, then e || e Event returns, if the IE, hidden variables and e is not present, event is returned.
Secondly, currKey = e.keyCode || e.which || e.charCode; key code phrase for compatibility attributes (see section III) key event object browser, such as IE, only keyCode attribute, FireFox there charCode properties and which, Opera has keyCode and which attributes.

The code is only compatible browser, acquired keyup event object, simply pop the key code and key characters, but the problem arises when you keys, character keys are in uppercase, and when you press the shift key, display very strange characters, so the need to optimize the code.

Third, code implementation and optimization

1, the character code and the key code of key events
in IE, only a keyCode property, and its interpretation depends on the type of event. For keydown it, keyCode storage is the key code for the keypress event is, keyCode storage is a character code. And which and in IE without charCode properties, the properties of which and charCode always undefined.
When in FireFox keyCode is always 0, time keydown / keyup, charCode = 0, which is the key code. When events keypress, the same value and both which charCode, storing the character code.
In Opera, the value of both the keyCode which is always the same, in keydown / keyup event, they are stored key code in the keypress time, they are stored in the character code, and charCode not defined, it is always undefined.
2, with / or keypress keyup keydown
first part has introduced the distinction keydown / keyup and keypress, there is a more general rule, keydown event for the function keys is the most useful, and keypress events for the printable keys is the most useful [3].
Keyloggers are mainly directed to printable characters and some function keys, so keypress is preferred, however, as mentioned in the first part, IE does not support the keypress function keys, so you should use keydown / keyup events to complement. 3, implementation code of the general idea, for the key characters keypress event object, a function of acquiring a character, such as Enter, Backspace, etc. with keydown event. Code implementation is as follows:

<body> 
<Script type = "text / JavaScript"> var keyString = ""; // record key string function $ (S) { return document.getElementById (S)? document.getElementById (S): S;}
 function KeyPress (E) 
{ var currKey = 0, the CapsLock = 0, E = E || Event; 
　  currKey = e.keyCode || || e.which e.charCode; 
　 the CapsLock = currKey> = 65 && currKey <= 90 ;
　  Switch ( currKey) 
　 { // shielding backspace, tab, enter, space, a direction key, delete key Case . 8: Case . 9: Case 13 is: 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 = "empty record" onclick = "$ ( 'content '). = the innerHTML ''; keyString = ''; "/> 
a key press any key to see the keyboard response: <span ID =" Content "> </ span> 
</ body>

Code analysis:
$ (): Get dom The ID
keypress (E): intercepted character codes to achieve, since the function keys use keydown acquired, the shield of the function keys in the keypress.
keydown (e): The main function is to achieve access to the keys.
keyup (e): show intercepted string.

Fourth, the summary of key events

Original coding object can be recorded through the key js, and returns a string.
Js achieve the above code requires only basic English keyloggers for Chinese characters are powerless, record Chinese characters, I could think of, of course, is to use js, is recorded with the underlying key events keydown and keyup, of course, powerless to resolve characters. Of course, you can get the Chinese character input with the DOM directly, but it has left the key events discussed in this article with the intention to achieve key records.
The code can also be achieved adding clipboard functions, monitoring functions to delete, and so on. . .

Reprinted from: http://www.itxueyuan.org/view/5796.html

Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/05/08/3068018.html