The two moving end IOS pits

Recently because the project needs to do a few simple page letter in the micro end. Although the page is simple, but also found two pits on iOS adaptation. This article hopes to record the solutions to these two problems, but also hope to help you.

1. IOS 12 bug codes

IOS 12 added a feature that can automatically fill after receipt of SMS verification code. But there is a bug, that will automatically fill twice (as shown below).

For the time being this bug is no perfect solution. A temporary solution is to limit the length of the input box. For example, if four codes, codes the input box to define a maximum length of 4, if the 6-bit codes to define a maximum length of 6 bits.

2.IOS micro-channel compatible browser bug

Currently there is a bug ios is typing in the text box, enter after the completion away after the soft keyboard, the height of the page can not be restored. Might sound more abstract and concrete problems can look:

This is a simple little demo, specific question probably like this. The idea for solving this problem is very simple, listening blur events for each input box, then) page will be calibrated by window.scroll (. Specific codes are as follows (since I use vue, from virgin or jquery js itself may modify the code):

//判断是否微信浏览器
isWeixinBrowser:function(){
    let ua = navigator.userAgent.toLowerCase();
    this.isWeixin = (/micromessenger/.test(ua)) ? true : false;
},
//ios bug修复
scrollTo:function(){
    if(!this.isWeixin) {
	    return;
    }
    window.scroll(0, 0);
}
复制代码

Reproduced in: https: //juejin.im/post/5cf87e4e518825276a285bac