About JavaScript Keyboard Events

Source: Internet
Author: User
Tags printable characters tagname

When using JavaScript For Web keyboard event listening and capturing, it mainly uses onkeypress, onkeydown, and onkeyup events. Three things
The execution sequence is as follows: onkeydown-> onkeypress
-> Onkeyup. Generally, three keyboard events can be used to effectively respond to keyboard input. In actual use, we will find that these differences are different.
The onkeypress event cannot properly respond to system function keys (for example, back-up or deletion, but cannot effectively respond to Chinese Input Methods). Both onkeydown and onkeyup can effectively intercept system function keys, however, you can select different Keyboard Events based on the actual situation.


Because onkeypress cannot capture system function keys, the keycode attribute of the window. event object and the onkeydown and onkeyup Keyboard Events
The keycode properties obtained in the onkeypress event are different, mainly because the keycode of the onkeypress event is case sensitive to letters, while the onkeydown and onkeyup events
Not sensitive; the keycode of the onkeypress event cannot distinguish between the number keys on the primary key disk and the number keys on the pay keyboard, while the keycode pairs of onkeydown and onkeyup
The numeric keys of the primary and pay keyboards are sensitive.

Note: In Maxthon browsers, onkeydown and onkeyup have two consecutive Keyboard Events. onkeydown cannot normally respond to F1 ~ F12 function keys are intercepted normally (onkeyup does not find this problem). The specific cause is unknown. I do not know whether the correction will be performed in the future.

 

++ ++


There are three types of Keyboard Events: keydown, kepress, and keyup. Each time you press the keyboard, the keyboard events (in turn ?) Trigger these three events. The keydown and keyup events are relatively low-level.
Similar to hardware events, the general understanding is that these two events can capture a key on your keyboard. keypress is a relatively advanced event relative to the character level, this event can be captured
The character you typed. It can be understood that if you hit the key, the keydown and keyup events only know that you hit the key, and it does not know that you typed a in upper case (you also pressed
Shift key) or lower-case A. It is in the unit of "key". You typed a in upper-case. It is just as if you typed shift and, however, keypress can capture
Whether you typed a in uppercase or a in lowercase.

Before introducing the event object in prototype, first introduce the event model in the browser. The events in the browser mainly include HTML events, mouse events, and Keyboard Events. The first two events are better understood, here we will mainly explain the keyboard events and their differences in IE and Firefox.

The concept is that keys in the keyboard are divided into character (printable) keys and function keys (non-printable). function keys include backspace, enter,
Escape, the arrow keys, page up, page down, and F1 through F12, etc.

The following describes how to use Keyboard Events,

The keyboard event object contains a keycode attribute. Only this attribute is available in IE.
The event is that the keycode attribute indicates the key you press (also known as virtual
Keycode). When a keypress event is captured, the keycode attribute refers to the character you typed (character code)


In Firefox, the event object contains a keycode attribute and a charcode attribute.
Keycode indicates the key you press. charcode is 0. When a keypress event is captured, keycode is 0. charcode indicates that you press
Characters

When a keypress event is captured, when you press a printable character, the keycode is 0, and charcode is the key value of the character you press, when you press a non-printable character, keycode is the key value of the pressed key, charcode is 0

Note: The function key does not trigger the keypress event, because keypress corresponds to printable characters, but there is a bit of IE and FF
You press the Alt key at the same time as the next character key. The keypress event is not triggered in IE, but can be triggered in ff. I found that only press the ctrl key in IE.
The Q key will trigger the event. Others will either not trigger the event or be captured by the Browser IE itself. For example, if you press ctrl_a and select all the items, you press ctrl_s to save the file, but in FF
Much better. Events are first transmitted to the webpage and then to the external

In view of the differences between IE and FF, if you are relatively lazy, we recommend that you only use keydow and keyup events. The use of these two events is basically no different in IE and ff, do not capture events that are defined as shortcut keys by browsers such as ctrl_a.

The keyboard event object has three other attributes: altkey, ctrlkey, and shiftkey to determine whether ALT and other keys are pressed when you press the next key. These three attributes are easy to use, all three events can be used, and there is no compatibility problem between IE and ff.

The event in prototype has the following attributes:

KEY_BACKSPACE: 8,
KEY_TAB: 9,
KEY_RETURN: 13,
KEY_ESC: 27,
KEY_LEFT: 37,
KEY_UP: 38,
KEY_RIGHT: 39,
KEY_DOWN: 40,
KEY_DELETE: 46,
KEY_HOME: 36,
KEY_END: 35,
KEY_PAGEUP: 33,
KEY_PAGEDOWN: 34,
And the following method:
  • Element (event): returns the element of the trigger event.
  • Isleftclick (event): determines whether to press the left button
  • Pointerx (event): the horizontal coordinate of the mouse when an event is triggered. For non-mouse events, this information is not found in FF, but in IE?
  • Pointery (event): The ordinate of the cursor position when an event is triggered
  • Stop (event): the default solution to prevent event propagation and browser
  • Findelement (event, tagname): finds an element whose tagname is tagname among all the ancestor elements that trigger the event.
  • Observe (element, name, observer, usecapture): registers event processing functions.
  • Stopobserving (element, name, observer, usecapture): Events that cancel registration

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.