Shulou(Shulou.com)06/03 Report--

This article is about the sample analysis of ios input box and keyboard compatibility optimization in h5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Business scenario

The input box fixed at the bottom of the h6 page

Whether it is using the

Or

When the focus event triggers the adjustment of the native keyboard, on some ios models (iphone 4s iphone 5, etc.), the keyboard will pop up and block the input box, making the user experience bad.

The current solution is to write a scheduled task that executes the following function when it is determined that the page is opened by ios

Let timer = setInterval (() = > {/ / container knows the dom node container.scrollIntoView ({block: 'start', behavior:' auto'})}, 300) of the entire container; / / 300ms is the value obtained after many experiments, and the user experience is better.

About scrollIntoView

ScrollIntoView, this API, the official explanation is that

The Element.scrollIntoView () method scrolls the element on which it's called into the visible area of the browser window.

Grammar

Element.scrollIntoView (); / / equivalent to element.scrollIntoView (true) element.scrollIntoView (alignToTop); / / Boolean parameter element.scrollIntoView (scrollIntoViewOptions); / / object parameter

Parameters.

Parameter description Type optional default alignToTop--boolean---falsescrollIntoViewOptions--object---- {behavior: "auto" | "instant" | "smooth", block: "start" | "end",}

Compatibility of scrollIntoView found in can i use (ie is not considered in mainstream browsers)

Compatible with Firefox 36 or above

Compatible with chrome 61 or above

Safiri 5.1 is not compatible with smooth in behavior

Follow-up question

Of course, this solution intelligently solves the problem of some models, and the real solution to this problem still depends on the native side.

Problems with ios and Android models

Because this scheduled task is set, there will be a follow-up problem, which has also been encountered in the landing project, which is explained here.

When you pull up or down to the end, there will be a white background, because with this timer, it will constantly pull the view back, causing the page to wobble.

If you do webview in the app layer to prohibit dragging, then there will not be this problem, of course, can not be completely dependent on app, in the program we also need to do this aspect of compatibility optimization.

TouchStart (e) {this.clearTimer ();}, touchEnd (e) {this.repairIosInput ();}, clearTimer () {if (this.timer) {clearInterval (this.timer); this.timer = null;} else {return;}}, repairIosInput () {if (this.timer) {return } this.timer = setInterval (() = > {container.scrollIntoView ({block: 'start', behavior:' auto'})}, 300);}

The problem of jitter can be solved by emptying the timer when you start pulling the page and starting the timer when you stop pulling.

Thank you for reading! On "h5 ios input box and keyboard compatibility optimization example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.