Comprehensive control over js Keyboard Events

The following small series will bring you an article on comprehensive control over js Keyboard Events. I think this is quite good. I will share it with you and give you a reference. Let's take a look at it in four parts.

Part 1: browser button events
Part 2: compatible with browsers
Part 3: code implementation and Optimization
Part 4: Summary

Part 1: browser button events

When using js to implement keyboard record, you need to pay attention to the three types of browser key events, namely, keydown, keypress, and keyup, which correspond to the onkeydown, onkeypress, and onkeyup event handles respectively. A typical key generates all three events, namely, keydown, keypress, and keyup when the key is released.

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

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

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

Part 2: compatible with browsers

Any js involving browsers should consider browser compatibility issues.

Currently, common 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

First, you need to know how to initialize the event. The basic statement is as follows:

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

When the browser reads this statement, the KeyDown () function is called no matter which key is pressed on the keyboard.

2.2 Implementation of FireFox and Opera

FireFox, Opera, and other programs are much more difficult to implement than IE, so we should first describe them here.

The keyDown () function has a hidden variable-General. We use the letter "e" to represent this variable.

Function keyDown (e)

Variable e indicates that a key-down event occurs. To find which key is pressed, use the which attribute:

E. which

E. which will give the index value of the key. to convert the index value to the letter or number value of the key, the static function String. fromCharCode () is used, as follows:

String. fromCharCode (e. which)

Put the preceding statement together, we can get the key that is pressed in FireFox:

Function keyDown (e) {var keycode = e. which; var realkey = String. fromCharCode (e. which); alert ("key code:" + keycode + "character:" + realkey);} document. onkeydown = keyDown;

2.4 determine the browser type

I learned how to obtain the key event object in various browsers. There are many methods to determine the browser type, which are easy to understand, there are also some clever methods. The general method is to use the appName attribute of the navigator object. Of course, you can also use the userAgent attribute. Here, appName can be 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". Therefore, a simple function 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 ("key code:" + keycode + "character:" + realkey);} document. onkeyup = keyUp;

The simplest method is [2]:

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 clever, and a simple explanation:

First, e = e | event; this code is used for compatibility with browser event object acquisition. In JavaScript, this Code indicates that if the Hidden variable e exists in FireFox or Opera, e | event returns e. If it is in IE, if the Hidden variable e does not exist, the event is returned.

Second, currKey = e. keyCode | e. which | e. charCode; this statement is used to ensure compatibility with the key code attribute of the browser key event object (see section 3). For example, in IE, only the keyCode attribute is available, while in FireFox, the which and charCode attributes are available, opera has the keyCode and which attributes.

The above code is only compatible with the browser and obtains the keyup event object. The key code and key character are displayed in simple mode, but the problem occurs. When you press the key, the character key is in uppercase, when you press the shift key, the characters displayed are strange, so you need to optimize the code.

Part 3: code implementation and Optimization

3.1 key code and verification code for a key event

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 key code. The which and charCode attributes are not in IE, so the which and charCode attributes are always undefined.

In FireFox, the keyCode is always 0. When the keydown/keyup time is used, charCode = 0, and which is the key code. During event keypress, the value of which and charCode is the same, and the escape 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 key code, but charCode is not defined, always undefined.

3.2 use keydown/keyup or keypress

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

Keypress records are mainly for printable characters and some functional buttons, so keypress is the first choice. However, as mentioned in the first part, keypress in IE does not support functional buttons, therefore, the keydown/keyup event should be used for Supplement.

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 and Backspace.

The code implementation is as follows:

! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> Js key records