前端開發微信公衆號在ios中常碰見的問題和解決方法

1，

問題：ios手機輸入框得到焦點，軟鍵盤彈出，當其消失後，ios頁面底部會被彈出來一大片

空白，

此時，頁面整個卡住，點擊其餘功能不生效。

並且輸入框離底部越近，ios頁面底部被彈出來的空白區域越大，不只樣式上彆扭，並且頁面功

能沒法正常運行

解決方法：

目前試過來最佳方法是輸入框獲取焦點時，給頁面最外層盒子一個margin-bottom值500px左

右，失去焦點後再還原

代碼：

//判斷是否時蘋果手機
var str = navigator.userAgent.toLowerCase();	
var ver = str.match(/cpu iphone os (.*?) like mac os/);	
//是蘋果手機	
if(ver) {
    //獲取焦點，軟鍵盤彈出		
    $('input').focus(function() {
        //設定一個較大的值，input距離底部越近，值要設置的越大，通常500px到800px左右足夠了			
        $('.main').css('margin-bottom','500px');			
    })	
    //失去焦點		
    $('input').blur(function() {
        //還原爲初始值				
        $('.main').css('margin-bottom','0');			
    })	
}複製代碼

2，

問題：將輸入框做爲按鈕元素的狀況下，點擊時彈出彈窗，此時並不須要其手動輸入功能

方式：給輸入框標籤添加readonly屬性，在大部分ios手機上點擊輸入框後都不會出現焦點，但

是點擊iphone7手機上的輸入框依然會有焦點存在，而且神奇的是，彈窗出現後焦點會在彈窗

上出現

解決：能夠將readonly改成disabled屬性，此時須要添加一個父級元素做爲按鈕，否則會點擊

無效，而且注意修改輸入框背景顏色和字體顏色

//修改placeholder的顯示
input[disabled]::-webkit-input-placeholder {
    -webkit-text-fill-color: #999;
}
//修改value值的顯示
input[disabled]{
    background-color:transparent;
    -webkit-text-fill-color: #999;
}
複製代碼

3，

問題：頁面彈出彈窗，若無特殊設置的狀況下頁面依然能夠滑動，彈窗上如有輸入框存在，在

iphone7手機上點擊彈窗上的輸入框後，此時彈窗上的焦點會不穩定，處處亂跑，

解決：彈窗出現時，將頁面固定住，不讓滑動；

 禁止頁面滾動方法（同時適用於安卓和ios手機）：

//頁面滾動與不能滾動
function onHandler(event) {
    event.preventDefault();
}
//不讓頁面滾動
function noScroll() {
    $('html,body').css({
        'overflow':'hidden',
        'height':'100%'
    });
    document.addEventListener('touchmove',onHandler,false);
}
//恢復滾動
function getScroll() {
    $('html,body').css('overflow','inherit');
    document.removeEventListener('touchmove',onHandler,false);
}複製代碼