current position:Home>Applet input box focus, defocus and keyboard height change events

Applet input box focus, defocus and keyboard height change events

2022-05-15 07:51:59yurunmiao

Preface

When the applet input box gets focus , The keyboard will pop up ; When the input box loses focus , The keyboard will shrink . Input box focus 、 Out of focus and keyboard bounce and retraction can be bound to the event processor :

When the input box gets focus , Will trigger focus events and keyboard height changes ( Spring up ) event ; When you lose focus , Will trigger out of focus events and keyboard height changes ( shrinkage ) event ; among , The bounce and contraction state of the keyboard can be determined by the height of the keyboard (event.detail.height) Judge , When the keyboard height is greater than zero , The keyboard is pop-up ; When the keyboard height is equal to zero , The keyboard is retracted .

This paper focuses on the case when the input box obtains or loses focus in different scenarios , The execution order of the event handler .

Input box gets focus

Click on the input box , Input box to get focus , First perform the keyboard height change ( Spring up ) event , Then execute the focus event .

Input box loses focus

Click outside the input box , When the input box loses focus , First execute the out of focus event , Then perform the keyboard height change ( shrinkage ) event .

If the area outside the input box is bound with a click event , First execute the click event , Then execute the out of focus event ( Out of focus and keyboard height change ).

Keyboard height change event

When the input box gains or loses focus , Keyboard height change events are possible Execute many times , We need to record the last keyboard height , If the keyboard height of this time is the same as that of the previous time , End the execution of this event in advance .

Input box focus attribute

The input box has a focus attribute :focus( Boolean type ), Its value is set to true or false when , The input box will gain or lose focus , It will also trigger the event handler mentioned above , The order of execution is the same .

In order to avoid business logic confusion , We can try not to focus on 、 Set the value of focus attribute in out of focus and keyboard height change events .

Conclusion

The input box is one of the most frequently used components of the applet , When using its events to process business logic , Only by figuring out the execution sequence of relevant events , To ensure the correctness of business logic .

copyright notice
author[yurunmiao],Please bring the original link to reprint, thank you.
https://en.chowdera.com/2022/131/202205102047461450.html

Random recommended