在IOS11中position:fixed彈出框中的input出現游標錯位的問題

標籤：else   document   log   出現   前端   一半   war   int   點擊事件   

問題出現的背景：

在IOS11中position:fixed彈出框中的input出現游標錯位的問題

解決方案

一、設計互動方面最好不要讓彈窗中出現input輸入框；

二、前端處理此相容性的方案思路：

1、判斷手機機型：Android or ios    ios11 or ios其他   

/*ver 是IOS的版本，如果是Android  ver就不是數組*/
var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);if(Array.isArray(ver)){     ver = parseInt(ver[1], 10);}              

2、判斷彈出框出現的位置

a、點擊事件後將包含input的彈出框position:fixed改成position:absolute

b、計算彈出框的位置，如果clickbutton在螢幕的一半的上方，讓彈出框保持在螢幕的中上方，如果clickbutton在螢幕的一半的下方，讓彈出框保持在螢幕的中下方

/*

#get_award  是clickbutton
.tan_box  是彈出框

*/

$("#get_award").click(function () {    var top = $(this).position().top;/*點擊按鈕距離螢幕頂部的相對*/    var scrollTop = $(document).scrollTop();/*捲軸的位置*/    var window_height = $(window).height();/*螢幕的可視高度*/    var box_height = $(".tan_box").height();/*彈框的高度*/        top1 = top - scrollTop;    window_height = window_height/2;    if(top1<window_height){        if(top1<box_height/2){            var top2 =top+100+box_height/2        }else{            var top2 = window_height+(top+100)/2+box_height/2        }        $(".tan_box").css("top", top2);    }else{        if(window_height-top1<box_height/2){            var top2 = top-100-box_height/2        }else{            var top2 = (top+100)/2+box_height/2        }        $(".tan_box").css("top", top2);    }})

author by:hgq  tuantuan 

在IOS11中position:fixed彈出框中的input出現游標錯位的問題