JS Event (9)-keyboard event

Source: Internet
Author: User
Tags alphabetic character uppercase letter

Keyboard events

Support for keyboard events is primarily followed by the DOM0 level.

"DOM3-level Event" for keyboard events developed specifications, IE9 first implementation.

KeyDown events

Press any key on the keyboard to trigger, press and hold, and repeat the trigger.

KeyPress events

Press the character key on the keyboard to trigger, press and hold, and repeat the trigger.

Pressing the EEC key will also trigger this event.

KeyUp events

Triggered when a key on the keyboard is released.

Trigger Order

(1) When a character key on the keyboard is pressed, the KeyDown event is triggered first, followed by the KeyPress event, and finally the KeyUp event is triggered. Where the KeyDown and KeyPress events are triggered before the text box changes, and the KeyUp event is triggered after the text box has changed.

(2) When a non-character key is pressed on the keyboard, the KeyDown event is triggered first and then the KeyUp event.

modifier keys for keyboard events

Keyboard events, like mouse events, support the corresponding modifier keys, and the object of the keyboard event also contains the Shiftkey, Ctrlkey, Altkey, and Metakey properties; IE does not support Metakey.

1Document.onkeyup =function(event) {2Event = Event | |window.event;3     varArray = [];4     if(event.altkey) {5Array.push ("Alt");6     };7     if(event.ctrlkey) {8Array.push ("Ctrl");9     };Ten     if(event.shiftkey) { OneArray.push ("Shift"); A     }; -     if(event.metakey) { -Array.push ("meta"); the     }; -     if(Event.keycode ===13) { -Alert ("Press ENTER also pressed:" + array.join (",")); -     }; +};

Still an old problem, Metakey attribute is not detected.

Key code

When the KeyDown and KeyUp events occur, the KeyCode attribute in the event object contains a code that corresponds to a specific key on the keyboard.

For a numeric, alphabetic character key, the KeyCode value is the same as that of the lowercase letters in ASCII, which means that the keycode value of the uppercase letter is not different.

1 function (event) {2     event = Event | | window.event; 3     alert (event.keycode); 4 };

Character encoding

In all browsers, pressing the key that can insert or delete characters triggers the KeyPress event.

The event object for IE9, Firefox, Safari, and Chrome supports a CharCode property that contains the value only when the KeyPress event occurs, and that the value is the AECII encoding of the character that is the code of the pressed key. The charcode value of the uppercase and lowercase letters is different.

1 function (event) {2     event = Event | | window.event; 3     Alert ("CharCode:" + Event.charcode); 4 };

JS Event (9)-keyboard event

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.