移动端键盘和光标的兼容那点事

做者：@micky思 @wupq @yewq

在H5的开发中，我的的制做页面布局习性不一样，多多少少会产生在真机上input的光标和键盘的弹出会出现的各类BUG，文中整理了部分遇到的问题，欢迎新增

---

ios移动端输入框上浮致使输入位置偏移

问题缘由：遮罩层定位为fixed，当键盘弹起时，ios11以及如下视口计算有问题，页面的fixed会失效，变成absolute，结果就是当屏幕数据超过一屏时，滑动页面，input框也会跟着一块儿滚动致使光标不跟随密码弹出框移动。
解决方法：若是使用页面数据不超过一屏（禁止滚动），那么即便变成了absolute页面也不会有什么变化。

//在弹窗出现的事件里加入
$('.wrap').css('height','100%');//wrap为包含除弹窗外的全部页面元素的父div
//关闭弹窗时div恢复原来高度
$('body').on('click','.pop_close',function(){
    $('.wrap').css('height','24.69rem');
});
//ps：若是总体背景图是在父元素wrap里，background-size：cover

微信输入法键盘弹起H5页面没法还原

//判断ios系统
var u=navigator.userAgent;
if(u.indexOf('iPhone')>-1){
    var flag;
    $('body').on('focus','input',function(){
        flag=false;
    });
    $('body').on('blur','input',function(){
        flag=true;
        setTimeout(function(){
            if(flag==false){
                return false;
            }else{
                document.body.scrollTop=document.body.scrollTop;
            }
            //防止在多个input间切换时作过多操做
        },0);
        //解决select致使的键盘弹起 
        $('.select').on('click',function(){
            document.body.scrollTop = document.body.scrollTop;
        });
    });
}

readonly时，IOS会出现光标和输入提示

<input type="text" class="" value="" readonly unselectable="on" onfocus="this.blur()">