Front-end Training – Initial Stage – Scene Actual Warfare (2019-05-30) – Input Search How to Prevent Shaking and Handle Chinese Input

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.

1. Throttle and debounce
2. Events supported by input tags (value-related)
3. 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

1. Keydown event
   KeyDown
2. 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.
3. Keyup event
   Keyboard pop-up event

Value change event

1. 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 to123456At this time456Delete, and you will find that it will not triggerchange。 Test address-change event
2. Input event
   Value change events are triggered each time they change.
   In the same test case, the trigger will be found9secondinputEvent. Test address-input event

Input Method Events

1. compositionstart
   The first letter of the input method is triggered. Input Method Status
2. compositionupdate
   Triggered each update of the input method. Input method state input content.
3. 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.compositionstartIt’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

1. TriggeredcompositionupdateNext timeinputAbandon.compositionendTriggerinputEvents;
   Test Address – Scheme 1. It feels good. If you shake it off, give itdemo5Console = debounce(demo5Console, 3000)。
   
2. compositionstartTime to changevalueOf 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 throughcompositionupdateTo correct the contents of the input box.

Why not say mobile? Because I haven’t tested yet…

Epilogue

Reference material

1. Event Reference – MDN