H5 ios input box and keyboard compatibility optimization

The cause of

The input box of H5 causes the keyboard and leads to a bad experience. At present, even wechat, Zhihu, Baidu and other products do not have a good technical solution to achieve, especially under the premise of using all kinds of solutions for the input box fixed at the bottom, the experience is not very good. This problem is also a big problem. At present, we are preparing a set of protocols with Native to solve this problem. The solutions in the current project are worth learning from, please share them

The business scenario

Fixed to the input box at the bottom of the H5 page

Whether in use

<input />
Copy the code

or

    <div contenteditable="true">
    </div>
Copy the code

When the focus event triggers the tuning of the native keyboard, in some ios models (iPhone 4S, iPhone 5, etc.), the keyboard will block the input box after bouncing up, resulting in poor user experience.

The current solution is to write a timed task that executes the following function when determining that ios has opened the page

let timer = setInterval((a)= >{
    // Container knows the DOM node of the entire container
     container.scrollIntoView({ 
        block: 'start'.behavior: 'auto'})},300); //300 milliseconds is the number of times the user experience is good
Copy the code

About scrollIntoView

The scrollIntoView API, 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 arguments
element.scrollIntoView(scrollIntoViewOptions); // Object parameters
Copy the code

parameter

{
    behavior: "auto"  | "instant" | "smooth".block:    "start" | "end",}Copy the code

ScrollIntoView compatibility found in Can I Use (ie is not considered in mainstream browsers)

• Compatible with Firefox 36 and above
• Chrome 61 + compatible
• Safiri 5.1 was initially incompatible with Smooth in Behavior

Follow-up questions

Of course, this solution intelligently solves the problems of some models, but the real solution still depends on the Native terminal.

Issues on ios and Android models

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

When you pull up or down to the end, the background is white, because the timer keeps pulling the view back, causing the page to jitter. This problem will not occur if the WebView is prohibited to drag in the APP layer. Of course, we cannot rely on the APP completely. We also need to make compatible optimization in this aspect in the program.

    <div class="container"
         @touchStart="touchStart($event)"
         @touchEnd="touchEnd($event)">
    
    </div>
Copy the code

 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((a)= >{
          container.scrollIntoView({ 
            block: 'start'.behavior: 'auto'})},300);
 }
Copy the code

Empty the timer when you start pulling the page and turn it on when you stop. This will solve the jitter problem.

conclusion

As an old difficult problem, will use more solutions, please contact me, discuss together, as soon as possible!