H5 IOS input box and keyboard compatibility optimization

Time:2019-11-8

cause

The input box of H5 causes bad experience on the keyboard. At present, even wechat, Zhihu, Baidu and other products do not have a good technical solution. In particular, the experience is not very good under the premise that all the solutions of the input box at the fixed position at the bottom are used. This problem is also a very difficult one. At present, we are preparing a set of native protocol to solve this problem. At present, the solutions in the project are still worth learning. Share with us

Business scenario

Input box fixed at the bottom of H5 page

Whether using

<input />

still

    <div contenteditable="true">
    </div>

When the focus event triggers the native keyboard, theiosSome models (iPhone 4S, iPhone 5, etc.) will make the keyboard pop up and block the input box, making the user experience bad.

The current solution is to write a timing task and execute the following functions when it is determined that IOS opens the page

let timer = setInterval(()=>{
    //Container knows the domain node of the whole container
     container.scrollIntoView({ 
        block: 'start',
        behavior: 'auto'
     })
}, 300); // 300ms is the value obtained through multiple tests, and the user experience is better

About scrollintoview

The official explanation for the scrollintoview API is
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 type parameter 
Element. Scrollintoview (scrollintoviewoptions); // object type parameter

parameter

parameter Explain type Optional value Default value
alignToTop boolean false
scrollIntoViewOptions object
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

Compatibility of scrollintoview found in can I use (ie is not considered in mainstream browsers)

  • Firefox 36 + compatible
  • Chrome 61up compatible
  • Safiri 5.1 starts incompatible with smooth in behavior

Follow up questions

Of course, this solution intelligently solves the problems of some models. To truly solve this problem, we need to rely on the native end.

Problems with IOS and Android models

Because this timing task is set, there will be a follow-up problem, which is also encountered in the landing project. Let me explain here.


When you pull up or down to the end, the background will be white, because with this timer, it will constantly pull the view back, causing page jitter.
If WebView is used to disable dragging in app layer, there will be no such problem. Of course, we can’t rely on app completely. We also need to do compatibility optimization in this aspect in the program.

    <div class="container"
         @touchStart="touchStart($event)"
         @touchEnd="touchEnd($event)">
    
    </div>
 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);
 }

Clear the timer when you start pulling the page, and turn on the timer when you stop pulling, so you can solve the problem of jitter.

summary

As a long-standing problem, we will use more solutions. Please contact me and discuss with me to get out of the pit as soon as possible!