"Mobile Web" soft-keyboard compatibility issues

Soft Keyboard Retractable event

There have been several problems with web-mobile compatibility this week. And it took a long time to study how to deal with these compatibility issues.

This time we talk about the mobile side of the soft keyboard JS processing it.

In general, the front end is unable to monitor whether the soft keyboard is bouncing out or shutting down. It is generally possible to use the input box to get the Focus event (focus) and the input box to lose focus event (Blur).

iOS device, click the input box, the input box to get the focus, the soft keyboard will pop up , the soft keyboard closed, the input box can also lose focus. This is no problem with iOS. You can also use this method to handle keyboard-related issues.

However, under the Android device, click the input box, the input box to get the focus, pop-up soft keyboard is no problem, but when we close the software disk, the input box in fact the focus will not be lost. Therefore, this method is not suitable for Android. So use resize.

Bottom line : iOS uses focus and blur to handle all soft keyboard events, and the Android section can handle it, but add the window's Resize event to listen for the soft keyboard open and close.

Click on the processing after the input box:

Click Other nodes or iOS to turn off the processing of the soft keyboard:

Under Android, this will determine the status of the soft keyboard.

While iOS soft keyboard retractable does not trigger the Resize method, stating that the iOS soft keyboard popup does not change the height of the page, Android can. So it can be solved.

Soft keyboard problems follow up ~ ~

"Mobile Web" soft-keyboard compatibility issues