Detailed analysis of input events in the input input box_javascript skills

1. Basics: The principle of this analysis is the various incompatibilities in triggering events when the input content changes in various browsers. Use the onpropertychange event under IE and the input event in other browsers.
2. Use case: Test each browser separately for the following situations:
– when inputting English letters – when opening the input method – when uppercase and lowercase letters are different – ​​when entering operators – when pressing the tab key – when pressing the input method When space is pressed – when the control key is pressed – when copying and pasting – when text is deleted – etc.
3. Test start: (Only special cases are marked, those not marked indicate normal triggering, and only one event is triggered each time)
chrome:
When the input method is turned on, input events can be captured.
When the input method is turned on, press the space bar to trigger two events. I guess one is triggered by the space and the other is when the input method changes the input box. It is triggered when the text in.
When the input method is turned on, press the space button and then press the caps lock immediately. After that, all input events will be triggered twice for unknown reasons.
When the input method is not turned on. , the direction keys will not trigger events, but after the input method is turned on, the direction keys can trigger events.
Both cutting and pasting will trigger events. The tab key does not trigger events. When the input method is turned on, pressing the tab key triggers the event.
Press and hold shift and other keys (for example: numeric keys), and the event will be triggered twice every time a character is entered.
Firefox:
When the input method is turned on, the event cannot be captured, but when space is pressed, it can be triggered. Two events.
The arrow keys do not trigger events at any time.
When the input method is turned on, after pressing the space button, the caps lock is pressed immediately. After that, all input events will be triggered twice. The reason is unknown.
The event will not be triggered when the tab key is pressed. The content will be retained in the input box when the Firefox page is refreshed.
Press and hold shift and other keys (for example: numeric keys), and the event will be triggered twice for each character entered. Event.
opera:
Under normal circumstances, pressing the tab key in the input box will trigger an event, but as long as the page is not refreshed thereafter, the tab key will not trigger this event again.
Turn on the input method The event will not be triggered. After it is turned on, neither the direction keys nor the tab key will trigger the event.
When the input method is turned on, pressing the space box will only trigger the event once, and will not trigger the event twice.
Pasted When the event is triggered, it is not triggered when cutting.
ie:
The input method will not trigger the event. Pressing the space button will only trigger the event once. The arrow keys will not trigger at any time.
When refreshing the page, the event will be triggered. will stay in the input, and note that no matter whether the input is empty or not, an event will be automatically triggered after refreshing the page.
3. Summary.
In one sentence, the difference is very big.
Note that the input event can be used In Chrome, Firefox, and Opera, it can only be bound using addEventListener, not ontype. Onpropertychange can be bound using on, or attachEvent

Other online demonstration instructions: http: //www.jb51.net/tools/keyboard_events.html