Detailed analysis of input events in the input box

1. Basic: The analysis principle is to trigger various incompatibility of events when input content changes in various browsers. Use the onpropertychange event in IE and use the input event in other browsers.

2. Use Case: perform the following tests on each Browser:

-When entering English letters-when the input method is enabled-case insensitive-when the operator is entered-when the tab key is pressed-when spaces are pressed in the input method-when the control key is pressed-When copying and pasting-when the text is deleted -etc.

3. Test start: (only special cases are marked, but unspecified ones indicate normal triggering. Only one event is triggered at a time)

Chrome:

+ When the input method is enabled, input events can be captured.

+ When the input method is enabled, press the Space key to trigger two events. One is triggered by space, and the other is triggered when the input method changes the text in the input box.

+ When the input method is enabled, press the space and immediately press the capital to lock it. After that, all input events will be triggered twice for unknown reasons.

+ When the input method is not enabled, the arrow keys do not trigger events. However, after the input method is enabled, the arrow keys can trigger events.

+ The cut and paste operations will trigger the event. + the tab key does not penalize the event. When the input method is enabled, press the tab key to trigger the event.

+ Press shift and other keys (such as number keys) to trigger two events each time one character is entered.

Firefox:

+ When the input method is enabled, events cannot be caught, but two events can be triggered when spaces are pressed.

+ No direction keys trigger events at any time.

+ When the input method is enabled, press the space and immediately press the capital to lock it. After that, all input events will be triggered twice for unknown reasons.

+ When you press the tab key, the event is not triggered. + when the Firefox page is refreshed, the content is retained in the input box.

+ Press shift and other keys (such as number keys) to trigger two events each time one character is entered.

Opera:

+ Under normal circumstances, pressing the tab key in the input box will trigger an event. However, as long as the page is not refreshed, the tab key will no longer trigger this event.

+ Events are not triggered after the input method is enabled. After the input method is enabled, neither the arrow key nor the tab key triggers events.

+ When the input method is enabled, only one event is triggered by pressing a space. Two events are not triggered.

+ Events are triggered during pasting, but not during cropping.

IE:

+ The input method does not trigger events, and it only triggers events once by pressing spaces. The direction keys are not triggered at any time.

+ When refreshing the page, the content will remain in the input. Note that, whether the input is empty or not, an event is automatically triggered after refreshing the page.

3. Summary.

In one sentence, there is a big difference.

Note that the input event can be used in chrome, Firefox, and opera, but can only be bound with addeventlistener, rather than ONTYPE, and onpropertychange can be in the on or attachevent format.