H5 soft keyboard problem

technological process ： Input box to get focus , The soft keyboard pops up

There may be problems ：

• stay Android and IOS On , It is known that there is a difference between the pop-up and stow states of the soft keyboard , And the page webview Behave differently .

• stay IOS12 On , Wechat version v6.7.4 And above , Input box to get focus , The keyboard bounced up , page （webview） Scroll up as a whole , When the keyboard is stowed , Do not return to the original position , The original position of the keyboard is blank .

• stay IOS On , Use third-party input methods , There is deviation in height calculation , This causes some input methods to pop up , Block the input field partially .

• Use some operating skills on some browsers , The input box is still blocked by the input method .

Learn the status of soft keyboard bounce and retract

It is very important to know whether the soft keyboard is in the up or down state , This is the premise for subsequent compatibility processing . However ,H5 Native events of the sof thet keyboard are not directly monitored , You can only use the soft keyboard to pop up or stow , Cause the performance of other aspects of the page to indirectly listen , Curve of national salvation . also , stay IOS and Android The performance is different .

• stay IOS On , Input box （input、textarea or Rich text ） Get focus , The keyboard bounced up , page （webview） Not compressed , Or height （height） There is no change , Just the page （webview） The whole thing rolled up , And the maximum rolling height （scrollTop） For soft keyboard height .
• stay Android On , Input box to get focus , The keyboard bounced up , But the page （webview） The height will change , Generally speaking , The height is the height of the viewing area （ Original height minus soft keyboard height ）, Apart from the fact that the content of the page is stretched out to create scrolling ,webview Can't roll by itself .

as follows ios and Android The soft keyboard pops up and the page changes ：

• IOS： Trigger on the soft keyboard “ Retract ” Button or Click on the page area outside the input box , That is, the input box loses focus , Soft keyboard up .
• Android： When an area outside the input box is triggered , Input box loses focus , Soft keyboard up . however , When you trigger the stow button on the keyboard , The input box doesn't lose focus , Also, the soft keyboard is folded up

Monitor the pop-up and retraction of the soft keyboard ：

• stay IOS On , Listen to the input box focus Event to learn the soft keyboard pop up , Listen to the input box blur Event learned soft keyboard up .

• stay Android On , monitor webview The height will change , The height becomes smaller and the soft keyboard pops up , Otherwise, the soft keyboard will be folded up （ The soft keyboard retraction is not directly related to the focus of the input box ）.

//  Determine the type of equipment 
var judgeDeviceType = function () {
    var ua = navigator.userAgent.toLocaleLowerCase(),
        isIOS = /iphone|ipad|ipod/.test(ua),
        isAndroid = /android/.test(ua);

    return {
        isIOS: isIOS,
        isAndroid: isAndroid
    }
}()


//  Monitor the soft keyboard pop-up and stow events of the input box 
function listenKeybord($input) {
    if (judgeDeviceType.isIOS) {
        // IOS  The keyboard bounced up ：IOS  and  Android  The input box gets the focus and the keyboard pops up 
        $input.addEventListener('focus', function () {
            console.log('IOS  The keyboard pops up ！');
            // IOS  Operate after the keyboard pops up 
        }, false)

        // IOS  Keyboard up ：IOS  Click the area outside the input box or click the stow button , Input fields lose focus , The keyboard will fold up 
        $input.addEventListener('blur', () => {
          console.log('IOS  The keyboard is stowed ！');
          // IOS  Operate after the keyboard is folded up 
        })
    }

    if (judgeDeviceType.isAndroid) {
        // Andriod  Keyboard up ：Andriod  The height of the page will change when the keyboard pops up or retracts , Based on this, it is learned that the keyboard is stowed 
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.addEventListener('resize', function () {
          var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (originHeight < resizeHeight) {
            console.log('Android  The keyboard is stowed ！');
            // Android  Operate after the keyboard is folded up 
          } else {
            console.log('Android  The keyboard pops up ！');
            // Android  Operate after the keyboard pops up 
          }

          originHeight = resizeHeight;
       }, false)
    }
}

var $inputs = document.querySelectorAll('.input');
for (var i = 0; i < $inputs.length; i++) {
    listenKeybord($inputs[i]);
}

Pop up the soft keyboard to always scroll the input field to the visible area

Sometimes we make an input form , There are many entries , Input box to get focus , Pop up the soft keyboard . When the input box is at the bottom of the page , stay IOS On , Will webview Roll up as a whole for a distance , Make the input box for obtaining focus automatically in the visible area , And in the Android Not so , It only changes the page height , Instead of scrolling to the current focus element to the viewable area .

solve ： stay Android When the keyboard pops up , Scroll the focus element （scrollIntoView()） To the viewable area .

Element  Interface scrollIntoView() Method scrolls the parent container of the element , Cause to be called scrollIntoView() The element is visible to the user .

//  Get the focus element and scroll to the viewable area 
function activeElementScrollIntoView(activeElement, delay) {
    var editable = activeElement.getAttribute('contenteditable')

    //  Input box 、textarea Or the rich text does not scroll the element to the viewable area after getting the focus 
    if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
        setTimeout(function () {
          activeElement.scrollIntoView();
        }, delay)
    }
}


// Android  Operate after the keyboard pops up 
activeElementScrollIntoView($input, 1000);

Evoke pure digital soft keyboard ：

Set up input Of type by tel or number

 

compatible IOS12 + V6.7.4+

If you're using IOS12 and V6.7.4+ Version of wechat browser opens the form input above demo , You will be surprised to find that when the keyboard is put away , The page that was originally scrolled up does not return to the bottom position , The position that caused the original keyboard to pop up “ empty ” 了 .

This bug It's going to be all over the place Xcode10 packaged IOS12 On the device . Wechat official has given a solution https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800, Just fold the soft keyboard , Page （webview） Scroll back to the bottom of the window （clientHeight Location ）. Repaired https://wuwhs.github.io/demo/keyboard-compatible/input-fix-ios12-wx6.7.4.html

// IOS  Operate after the keyboard is folded up 

//  Wechat browser version 6.7.4+IOS12 When the keyboard is put away , The view is pushed up and not down 
var wechatInfo = navigator.userAgent.match(/MicroMessenger/([\d.]+)/i);
if (!wechatInfo) return;

var wechatVersion = wechatInfo[1];
var version = (navigator.appVersion).match(/OS (\d+)(\d+)?(\d+)?/);
if (+wechatVersion.replace(/./g, '') >= 674 && +version[1] >= 12) {
    setTimeout(function () {
        window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
    })
}

Compatible with third-party input methods

Case study ：https://wuwhs.github.io/demo/keyboard-compatible/chat.html, The main structure is as follows ：

<style>
/*  Omit some styles  */
.chat__content {
    height: calc(100% - 40px);
    margin-bottom: 40px;
    overflow-y: auto;
    overflow-x: hidden;
}

.input__content {
    display: flex;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
}
/*  Omit some styles  */
</style>

<div class="chat__content">
    <div>
        <p> Some chat content 1</p>
    </div>
    <div>
        <p> Some chat content 2</p>
    </div>
</div>

<div class="input__content">
    <div class="input" contenteditable="true"></div>
    <button> send out </button>
</div>

Most of the Android There's no problem with browsers , But the test is IOS On ,UC Browsers work with native and third-party input methods （ For example, Sogou input method ）, All input fields will be completely blocked ;QQ Browser or wechat browser , Coordinate with third-party input method , The input field is half hidden ; Baidu browser with third-party input method input box will also be completely covered .

stay UC The browser , When the soft keyboard pops up , The title bar on the top of the browser has a dynamic effect of decreasing the height and delaying , This leads to webview Rolled down a little , The bottom input field scrolls to the non visible area .
For third-party input methods , The guess itself is due to the error in the height calculation after the input method panel pops up , Lead to webview Error in initial rolling positioning . In fact, these two points are webview Rolling is not in place . You can make the soft keyboard pop up , Let the focus element roll to the visible area again , Force webview Roll in place .

// Android  Operate after the keyboard pops up 
activeElementScrollIntoView($input, 1000);

compatible Android Xiaomi browser Hack programme

stay Android On the Xiaomi browser , Apply the above scheme , I found that the chat input box is still blocked ,scrollIntoView() Still motionless . So guess , In fact, it is rolling to the end , The soft keyboard pops up , The page implementation height is greater than the viewable area height , This can only be done after the soft keyboard pops up , Forcibly increase the page height , So that the input box can be displayed .

    if (judgeDeviceType.isAndroid) {
        // Andriod  Keyboard up ：Andriod  The height of the page will change when the keyboard pops up or retracts , Based on this, it is learned that the keyboard is stowed 
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;
        window.addEventListener('resize', function () {
          var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (originHeight < resizeHeight) {
            console.log('Android  The keyboard is stowed ！');
            // Android  Operate after the keyboard is folded up 

             //  Repair Xiaomi browser , Input box is still blocked by input method 
             if (judgeDeviceType.isMiuiBrowser) {
                document.body.style.marginBottom = '0px';
             }
          } else {
            console.log('Android  The keyboard pops up ！');
            // Android  Operate after the keyboard pops up 

             //  Repair Xiaomi browser , Input box is still blocked by input method 
             if (judgeDeviceType.isMiuiBrowser) {
                document.body.style.marginBottom = '40px';
              }

              activeElementScrollIntoView($input, 1000);
          }

          originHeight = resizeHeight;
       }, false)
    }

input in type The type is related to the pop-up soft keyboard display , as follows ：

1.type=text ,ios And Android will pop up the full keyboard , The lower right corner is go Button or go

2.type=url , ios And Android will pop up with “/”、“.com” A soft keyboard that can quickly input web addresses

3.type=number,ios A soft keyboard containing numbers and various symbols will pop up under , Android will pop up a keyboard that is similar to a dial-up keyboard with pure numbers and some punctuation .

4.type=tel, This will make ios And Android are similar to the number keypad when dialing , So in mobile page development , Generally used type=tel Instead of type=number.

5.type=date、datetime、time、mouth. These are only in ios The next will pop up ios Native date selector .

6.type=email This will make ios And Android both pop up with “@” Key soft keyboard .

7.type=search This will change the go button in the lower right corner of the soft keyboard into a search magnifying glass button , And there will be an empty button on the right side of the input box . By the way , adopt css input[type=search] You can change the style of this button ！

ios Keyboard wrapping changes to search

1. input type="search"
2. input Outside cover form, There must be action,action="javascript:return true"
3. Form submission prevents default submission Events

<form action="javascript:return true" @submit.prevent="formSubmit">
  <input type="search" placeholder=" Please enter the claim name " id="search" />
</form>