javascript key event (compatible with all browsers)_javascript skills

Part 1: Browser key events

To implement keylogging using js, you should pay attention to the three key event types of the browser, namely keydown, keypress and keyup, which correspond to the three event handles onkeydown, onkeypress and onkeyup respectively. A typical keypress will generate all three events, in order keydown, keypress, and then keyup when the key is released.

Among these three event types, keydown and keyup are relatively low-level, while keypress is relatively advanced. The so-called advanced here means that when the user presses shift 1, keypress parses the key event and returns a printable "!" character, while keydown and keyup only record the shift 1 event. [1]

But keypress is only effective for some characters that can be printed. For function keys, such as F1-F12, Backspace, Enter, Escape, PageUP, PageDown and arrow direction, the keypress event will not be generated, but it can be generated. keydown and keyup events. However, in FireFox, function keys can generate keypress events.

The event objects passed to keydown, keypress and keyup event handlers have some common properties. If Alt, Ctrl, or Shift are pressed together with a key, this is represented by the event's altKey, ctrlKey, and shiftKey properties, which are common to FireFox and IE.

Part 2: Compatible Browsers

Any js that involves browsers must consider browser compatibility issues.
Currently commonly used browsers are mainly based on IE and Mozilla. Maxthon is based on the IE kernel, while FireFox and Opera are based on the Mozilla kernel.

2.1 Event initialization

The first thing you 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, no matter which key on the keyboard is pressed, the KeyDown() function will be called.

2.2 Implementation methods of FireFox and Opera

Programs such as FireFox and Opera are more troublesome to implement than IE, so I will describe them here first.

The keyDown() function has a hidden variable - generally, we use the letter "e" to represent this variable.

Function keyDown(e)

The variable e represents a keystroke event. To find which key was pressed, use the which attribute:

e.which

e.which will give the index value of the key. To convert the index value into the alphanumeric value of the key, you need to use the static function String.fromCharCode(), as follows:

String.fromCharCode(e.which)

Putting the above statements together, we can get which key was pressed in FireFox:

Copy code The code is as follows:

function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alert( "Keycode: " keycode " Character: " realkey);
　 }
　 document.onkeydown = keyDown;

2.3 Implementation method of IE

The IE program does not need the e variable. Use window.event.keyCode instead of e.which. The method of converting the key index value into the real key value is similar: String.fromCharCode(event.keyCode). The program is as follows:

Copy code The code is as follows:

function keyDown() {
var keycode = event.keyCode ;
　 var realkey = String.fromCharCode(event.keyCode);
alert("Keycode: " keycode " character: " realkey);
　 }
document.onkeydown = keyDown;

2.4 Determine browser type

We have learned above how to obtain key event objects in various browsers. Now we need to determine the browser type. There are many methods, some are easier to understand, and some are very clever. Let’s talk about the general ones first. Method: Use the appName attribute of the navigator object. Of course, you can also use the userAgent attribute. Here, appName is used to determine the browser type. The appName of IE and Maxthon is "Microsoft Internet Explorer", while the appName of FireFox and Opera is "Netscape". So a code with a relatively simple function is as follows:

Copy the code 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; "Keycode: " keycode " Character: " realkey);
　　}
　 document.onkeyup = keyUp;


The simpler method is [2]:

Copy code

The code is as follows: Function keyUp(e) { var currKey=0,e=e| |event; currKey=e.keyCode||e.which||e.charCode;

var keyName = String.fromCharCode(currKey);

alert("Key code: " currKey " character: " keyName);
　 }
　 document.onkeyup = keyUp;


The above method is more ingenious. Let’s explain it briefly:
First, e=e||event; this This code is for compatibility with browser event object acquisition. The meaning of this code in js is that if the hidden variable e exists in FireFox or Opera, then e||event returns e. If the hidden variable e does not exist in IE, then event is returned.
Secondly, currKey=e.keyCode||e.which||e.charCode; This sentence is to be compatible with the key code attribute of the browser key event object (see Part 3 for details). For example, in IE, there is only the keyCode attribute. , while FireFox has which and charCode attributes, Opera has keyCode and which attributes, etc.

The above code is only compatible with the browser, obtains the keyup event object, and simply pops up the key code and key characters, but a problem arises. When you press a key, the character keys are all in uppercase, and when you press the shift key , the characters displayed are very strange, so the code needs to be optimized.


Part 3: Code Implementation and Optimization

3.1 Key code and character code of key event

The key codes and character codes of key events lack portability between browsers. For different browsers and different case events, the storage methods of key codes and character codes are different... .

In IE, there is only one keyCode attribute, and its interpretation depends on the event type. For keydown, keyCode stores the key code. For keypress events, keyCode stores a character code. There are no which and charCode attributes in IE, so the which and charCode attributes are always undefined. The keyCode in FireFox is always 0. When the time is keydown/keyup, charCode=0, which is the key code. When the event keypress occurs, the values ​​of which and charCode are the same, and the character code is stored.

In Opera, the values ​​of keyCode and which are always the same. In the keydown/keyup event, they store the key code. In the keypress time, they store the character code, and charCode is not defined and is always undefined.

3.2 Should I use keydown/keyup or keypress

The first part has introduced the difference between keydown/keyup and keypress. There is a general rule that the keydown event is the most useful for function keys, while the keypress event is the most useful for printable keys [3 ].

Keyboard logging is mainly for printable characters and some function keys, so keypress is the first choice. However, as mentioned in the first part, keypress in IE does not support function keys, so keydown/keyup events should be used to supplement it.

3.3 Code implementation

The general idea is to use the keypress event object to obtain key characters, and use the keydown event to obtain function characters, such as Enter, Backspace, etc.

The code implementation is as follows

Copy the code

The code is as follows:

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