Shulou(Shulou.com)06/01 Report--

Let's start with some things about keyboard events: when you implement keyboard logging with js, you should pay attention to the browser's three keystroke event types, keydown,keypress and keyup, which correspond to onkeydown, onkeypress, and onkeyup event handles, respectively. A typical keystroke produces all three events, followed by keydown,keypress, followed by keyup when the key is released.

Of the three event types, keydown and keyup are lower, while keypress is higher. Advanced means that when the user presses shift + 1, keypress parses the keystroke event and returns a printable "!" Characters, while keydown and keyup only record the event shift + 1. [1]

However, keypress is only valid for characters that can be printed out, and for function keys, such as F1-F12, Backspace, Enter, Escape, PageUP, PageDown, and arrow directions, keypress events are not generated, but keydown and keyup events can be generated. In FireFox, however, function keystrokes can generate keypress events.

Event objects passed to the keydown, keypress, and keyup event handles have some common properties. If Alt, Ctrl, or Shift are pressed with a key, this is indicated by the altKey, ctrlKey, and shiftKey properties of the event, which are common in FireFox and IE, and the return value is a Boolean. There is also a metaKey attribute, but IE indicates that it is not supported.

Since it is to compare the similarities and differences among the three, the first thing must be to understand their definitions:

The keyCode property returns the character code of the value of the key triggered by the onpress event, or the key code of the onkeydown or onkeyup event.

The difference between the two types of code is:

Character code-A number that represents an ASCII character

Keyboard code-A number that represents the real key on the keyboard

The charCode property returns the alphabetic code for the value of the onpress event trigger key, for character codes only.

The which property is similar to keyCode, but is not compatible with browsers below IE8.

Let's talk about the troublesome browser problem: compatibility!

1. How to convert to characters in different browsers

(1) FireFox, Opera, Chrome

The function corresponding to the event has a hidden variable e, indicating that the event occurred.

E there is an attribute e.which that indicates which key is pressed and gives the key's index value (key code).

The static function String.fromCharCode () converts the index value (key code) into the character corresponding to the key.

Eg:

1 2 3 document.getElementById ("text"). Onkeypress = function (e) {4 alert ("key code:" + e.which + "character:" + String.fromCharCode (e.which)); 5}; 6

FireFox, Opera, Chrome enter "a"

Output: "key code: 97 characters: a"

(2) IE

IE does not require an e variable, and window.event indicates that an event has occurred.

Window.event has an attribute window.event.keyCode that indicates which key is pressed and gives the key's index value (key code).

The static function String.fromCharCode () converts the index value (key code) into the character corresponding to the key.

Eg:

1 2 3 document.getElementById ("text"). Onkeypress = function () {4 alert ("key code:" + window.event.keyCode + "character:" + String.fromCharCode (window.event.keyCode)); 5}; 6

Enter: an in IE

Output: key code: 97 characters: a

2. How to determine the type of browser

Utilize the appName property of the navigator object.

IE:navigator.appName== "Microsoft Internet Explorer"

FireFox, Opera, Chrome:navigator.appName== "Netscape"

Eg:

Document.getElementById ("text"). = (navigator.appName = = "Microsoft Internet Explorer" alert ("key code:" + window.event.keyCode + "character:" +} (navigator.appName = = "Netscape" alert ("key code:" + e.which + "character:" +

Enter: an in IE, FireFox, Opera, Chrome

Output: key code: 97 characters: a

Since the current browser will return undefined if there is no corresponding attribute, use the | operator to simplify it as follows:

1 2 3 document.getElementById ("text"). Onkeypress = function (e) {4 e = e | | window.event; 5 key = e.keyCode | | e.which | | e.charCode6 alert ("key code:" + key + "character:" + String.fromCharCode (key)); 7}; 8

Note: IE has only keyCode attributes, which and charCode attributes in FireFox, keyCode and which attributes in Opera, and keyCode, which and charCode attributes in Chrome. The which attribute is not supported in IE8 and earlier versions. Although the key attribute proposed by "DOM3 level" is good, it is not recommended due to compatibility issues!

Summary: in the keydown event, the event includes the keyCode-the physical code of the key pressed by the user. In keypress, keyCode contains character encoding, that is, the ASCII encoding of characters. This format works for all browsers, except Firefox, whose keyCode return value in the keypress event is 0; if you want to get the button the user actually clicked, use the keydown event to get the event object and the keycode value, which works for all browsers. On the other hand, if you want to get the characters entered by the user, use keypress to get it, and then get charCode [Firefox or Safari] or keyCode [other browsers].

Attached: the difference between keyPress and keyDown, keyUp:

1. KeyPress is mainly used to capture printable characters. For example, numbers (emphasis: symbols containing Shift+ numbers), letters (emphasis: including case), keypad, etc. Except F1-F12, SHIFT, Alt, Ctrl, Insert, Home, PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock..., etc.

2. KeyPress can only capture a single character, and keyDown and keyUp can capture key combinations.

3. KeyPress can capture the case of a single character.

4. KeyDown and keyUp are both a value for the keyValue captured by a single character, that is, they are not case-sensitive to a single character.

5. KeyPress does not distinguish between the numeric characters of the keypad and the main keyboard. KeyDown and keyUp distinguish the numeric characters of the keypad from the main keyboard.

6. The PrScrn keys keyPress, keyDown and keyUp cannot be captured.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.