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

作者：@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()">