移動端鍵盤和光標的兼容那點事

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