1. Basics: The principle of this analysis is to trigger various incompatibility of events when the input content changes in each browser. Use the onpropertychange event under ie, and use the input event in other browsers.
2. Use case: Test the following situations for each browser:
– When entering English letters – When turning on the input method – Different case – When entering operators – When pressing the tab key – When pressing the space in the input method – When pressing the control key – When copying and pasting – When deleting text – etc.
3. Test start: (Only mark special cases, non-marked means triggering normally, only one event is triggered each time)
chrome:
+When turning on the input method, you can capture the input event.
+When turning on the input method, press the space bar to trigger two events. It is guessed that once is triggered by the space, and once is triggered by the input method when changing the text in the input box.
+When turning on the input method, press the space and press the capitalization lock immediately. After that, all input events will be triggered twice, but the reason is unknown.
+ When the input method is not enabled, the arrow key will not trigger the event, but after the input method is enabled, the arrow key can trigger the event.
+ Cut and paste will trigger events. +tab key does not punish events. When the input method is turned on, press the tab key to trigger events.
+ Hold shift and other keys (for example: numeric keys), and each character is entered triggered twice.
Firefox:
+ When turning on the input method, the event cannot be caught, but when pressing a space, two events can be triggered.
+The arrow keys do not trigger events at any time.
+When turning on the input method, press the space and press the capitalization lock immediately. After that, all input events will be triggered twice, but 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.
+ Hold shift and other keys (for example: numeric keys), and each character is entered triggered twice.
opera:
+Under normal circumstances, pressing the tab key in the input box will trigger an event, but after that, as long as the page is not refreshed, the tab key will not trigger this event again.
+The event will not be triggered after turning on the input method. After turning on, the arrow keys and tab keys will not trigger the event.
+When turning on the input method, pressing the space to trigger the event only once, and no two events will be triggered.
+ Trigger event when pasting, not trigger when cutting
ie:
+Input method will not trigger events, and pressing spaces will only trigger once, and the arrow key will not be triggered at any time.
+ When refreshing the page, the content will be left in the input. Note that regardless of whether the input is empty or not, an event will be automatically triggered after refreshing the page.
3. Summary.
In just one sentence, there is a big difference.
Note that the input event can be used in chrome, Firefox, Opera, but it can only be bound with addEventListener, not ontype, and onpropertychange can be used on or attachedEvent.
Other online demonstration instructions:https:///tools/keyboard_events.html
2. Use case: Test the following situations for each browser:
– When entering English letters – When turning on the input method – Different case – When entering operators – When pressing the tab key – When pressing the space in the input method – When pressing the control key – When copying and pasting – When deleting text – etc.
3. Test start: (Only mark special cases, non-marked means triggering normally, only one event is triggered each time)
chrome:
+When turning on the input method, you can capture the input event.
+When turning on the input method, press the space bar to trigger two events. It is guessed that once is triggered by the space, and once is triggered by the input method when changing the text in the input box.
+When turning on the input method, press the space and press the capitalization lock immediately. After that, all input events will be triggered twice, but the reason is unknown.
+ When the input method is not enabled, the arrow key will not trigger the event, but after the input method is enabled, the arrow key can trigger the event.
+ Cut and paste will trigger events. +tab key does not punish events. When the input method is turned on, press the tab key to trigger events.
+ Hold shift and other keys (for example: numeric keys), and each character is entered triggered twice.
Firefox:
+ When turning on the input method, the event cannot be caught, but when pressing a space, two events can be triggered.
+The arrow keys do not trigger events at any time.
+When turning on the input method, press the space and press the capitalization lock immediately. After that, all input events will be triggered twice, but 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.
+ Hold shift and other keys (for example: numeric keys), and each character is entered triggered twice.
opera:
+Under normal circumstances, pressing the tab key in the input box will trigger an event, but after that, as long as the page is not refreshed, the tab key will not trigger this event again.
+The event will not be triggered after turning on the input method. After turning on, the arrow keys and tab keys will not trigger the event.
+When turning on the input method, pressing the space to trigger the event only once, and no two events will be triggered.
+ Trigger event when pasting, not trigger when cutting
ie:
+Input method will not trigger events, and pressing spaces will only trigger once, and the arrow key will not be triggered at any time.
+ When refreshing the page, the content will be left in the input. Note that regardless of whether the input is empty or not, an event will be automatically triggered after refreshing the page.
3. Summary.
In just one sentence, there is a big difference.
Note that the input event can be used in chrome, Firefox, Opera, but it can only be bound with addEventListener, not ontype, and onpropertychange can be used on or attachedEvent.
Other online demonstration instructions:https:///tools/keyboard_events.html