JavaScript Event Learning Chapter 1: button Detection

Source: Internet
Author: User

Checking users' buttons is a special part of the event processing program. This chapter focuses on solving some very difficult problems and developing a complete table.

The first problem is that there is no standard for button events. According to the standard, the event model containing the keyboard and other input devices will be explained in future DOM specifications.

As we have learned, the browser does not have a standard in its initial design. Everyone is like doing an experiment. Although the final product is useful, it certainly causes compatibility problems. Key-pressing issues are no exception: Here there are two attributes that can detect the keys that the user presses. Although there are enough reasons why two attributes are required, not all browsers support them.

In addition, there are some important differences between keypress, keydown, and keyup.

Finally, there is a difference between windows and mac. On mac, it is almost N times more difficult to detect the keys that a user presses than on windows.

KeyCode and charCode

It can be detected that the two attributes of the user's key are keyCode and charCode. To put it simply, the keyCode is used to detect the key that the user actually presses on the keyboard, while the charCode is the ASCII code that gives the entered characters. Note: The keyCode of uppercase and lowercase A is the same, because they are a key on the keyboard; but charCode is different, because they are two different characters.

IE and Opera do not support charCode. However, they will save the character information in the keyCode, but only in the case of onkeypress, onkeydown/up contains the key information.

Character and number key

Let's start with a simple example. The ASCII code of lowercase a is 97, and that of uppercase is 65. In either case, when the user clicks the same key on the keyboard, when is the key value 65 (equivalent to A in upper case)

KeyCode

CharCode

Therefore, in the case of onkeydown/up, you can get the key value from the keyCode. In onkeypress, to get the character value, use:evt.charCode || evt.keyCode.

Punctuation Marks

I decided not to test the punctuation key. I suspect this is not only related to browsers and operating systems, but also to keyboard settings and the default language. I usually use Dutch windows. I would not be surprised if I had a lot of difference with the American 101-key keyboard.

For example, shift +, the key should be <, but the result of the ASCII code I tested is '? . When I found this problem, I decided not to waste time on the punctuation key issue.

Special key

Function keys are only those that cannot be printed but have certain functions. For example, shift, ESC, and enter are all function keys.

Notes:

1. Generally, mac is less reliable than windows, and some keys may not be detected.

2. IE will not trigger the following keypress events: delete, end, enter, escape, function key, home, insert, pageUp/Down, And tab.

3. In the onkeypress event, Safari will give the following key very strange keyCode values: delete, end, function key, home and pageUp. Down. However, it is normal under onkeydown/up.

4. The Alt, Cmd, Ctrl, and shfit keys cannot be detected on mac, except for Opera. However, you can use the altKey, ctrlKey, and shfitKey attributes.

If you need to detect these keys, you just need to download the keyCode under onkeydown/up. You can just help yourself. Just forget onkeypress and charCode.

There is a large list of key values behind the original text, and a test box. If you are interested, you can move on.

Http://www.quirksmode.org/js/keys.html
Author: Beiyu (tw: @ rehawk)
Article Source: http://beiyu.cnblogs.com

Related Article

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.