ios裝置觸發虛擬鍵盤輸入後position:fixed 無效的一些簡單另類的解決方法

OldBoy~發表於2017-05-17
iOS

首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點選了輸入框之後的情況，就是要解決此問題~！

百度了一下解決方法，好像有以下的一些方法：

1. iscroll

2. Jquery Mobile

3. 監聽螢幕滾動事件給 #footer 賦值 

由於本人新手，第1，2種的方法就沒學過，所以暫時不用這2方法，來看第三種：監聽螢幕滾動事件給 #footer 賦值

1. 首先設定 #footer 的 position 的值為 absolute

2. 然後用$(window).scroll() 來監聽，再給 #footer 設定座標( top 屬性)

不過這方法我感覺有點不好，就是ios裝置在拖動螢幕的時候，頁面DOM的操作會被掛起，就是說你手指滾動螢幕的時候頁面會定死，當你的手指離開了螢幕後，dom的操作才執行。所以我也不用這種方式了。。

下面說下我用的另類方式，

1.  監聽input輸入框獲取焦點事件 $().focus()

2.  把螢幕滾動到底部 $window  scroll to bottom

3.  把 #footer 的 position 屬性設定成 static (或者absolute)

這樣 #footer 就會定位到最底部（但不是固定） 為什麼我要這麼做呢？ 因為呢，移動裝置彈出虛擬鍵盤的時候，頁面可見的地方已經很少了，一般情況在輸入的狀態下是不會拖動螢幕的了，所以就採用這種方式。

4.  監聽 input 失去焦點事件 $().blur()

5.  然後把 #footer 的 position 屬性設定成 fixed。 

這樣就好了。。。。

總結來說就是觸發虛擬鍵盤的時候把position屬性改成static/absolute, 虛擬鍵盤消失的時候再把 position 屬性改回 fixed........

function sb_blur(){
             $('#order_summary').css({
             "position":"fiexd",
             "bottom":"0"
             })
}
function sb_focus(){
             $(window).scrollTop(0);
         $('#order_summary').css({
             "position":"relative"
             })
}

 

相關文章