The content of scene actual combat is different for everyone. So the most recent updates are basically the problems I encountered and solved. Later, their content will be addressed.
What are we going to talk about today?
Sometimes I don’t know what to write. It’s interesting to see the title “Question 79: How to prevent the input search from shaking and how to deal with Chinese input” when digging for fish. Today let’s talk about these related knowledge.
- Throttle and debounce
- Events supported by input tags (value-related)
- Topic-Search Box-Dejitter-Processing Exceptions in Chinese Input
Throttle and debounce
Throttle and debounce, as I’ve written before, are ready-made, so I won’t write them.
Events supported by input Tags
- Keydown event
- Keypress event
Press downThe key that generates the character value triggers。 asLetters, numbers, punctuation marks。 An example of keys that do not produce character values is modifier keys such asAlt、Shift、Ctrl、backspaceetc.
- Keyup event
Keyboard pop-up event
Value change event
- Change event
The value changes the event and determines if it changes when it loses focus. If it changes, it will trigger.
You can enter it first.
123And then change it to
123456At this time
456Delete, and you will find that it will not trigger
change。 Test address-change event
- Input event
Value change events are triggered each time they change.
In the same test case, the trigger will be found
inputEvent. Test address-input event
Input Method Events
The first letter of the input method is triggered. Input Method Status
Triggered each update of the input method. Input method state input content.
Triggered after input method selection. Exit input method status
Search Box-Dejitter-Processing Exceptions in Chinese Input
In fact, we can see the above logic.
compositionstartIt’s something we need to monitor.
Sequence of event triggering
Enter the input method state:
Exit input method status:
Test Address – Scheme 1. It feels good. If you shake it off, give it
demo5Console = debounce(demo5Console, 3000)。
compositionstartTime to change
valueOf course, the scheme was unsuccessful because it would cause the input boxes to disappear.
To sum up
stayPC terminalWhen we have input, we need to pass through
compositionupdateTo correct the contents of the input box.
Why not say mobile? Because I haven’t tested yet…
- Event Reference – MDN