The most basic front-end is HTML + CSS + Javascript. Mastering these three technologies is an introduction, but it is only an introduction. Now the definition of front-end development is far more than that. Front-end small classroom (HTML/CSS/JS), in line with the central idea of improving technical level and firmly grasping basic knowledge, we have classes (every Thursday).
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
Keyboard events
- Keydown event
KeyDown - 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.123
And then change it to123456
At this time456
Delete, and you will find that it will not triggerchange
。 Test address-change event - Input event
Value change events are triggered each time they change.
In the same test case, the trigger will be found9
secondinput
Event. Test address-input event
Input Method Events
- compositionstart
The first letter of the input method is triggered. Input Method Status - compositionupdate
Triggered each update of the input method. Input method state input content. - compositionend
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.compositionstart
It’s something we need to monitor.
Sequence of event triggering
Enter the input method state:compositionstart=>compositionupdate=>input
Input:compositionupdate=>input
Exit input method status:compositionupdate=>input=>compositionend
Implementation scheme
- Triggered
compositionupdate
Next timeinput
Abandon.compositionend
Triggerinput
Events;
Test Address – Scheme 1. It feels good. If you shake it off, give itdemo5Console = debounce(demo5Console, 3000)
。 compositionstart
Time to changevalue
Of 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 throughcompositionupdate
To correct the contents of the input box.
Why not say mobile? Because I haven’t tested yet…
Epilogue
Reference material
- Event Reference – MDN