ios設備觸發(fā)虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

hosition 發(fā)布于2019-08-29 14:17 / 2725人閱讀

摘要：所以我也不用這種方式了。。監(jiān)聽失去焦點事件然后把的屬性設置成。這樣就好了。。。。總結來說就是觸發(fā)虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回

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

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

iscroll

Jquery Mobile

監(jiān)聽屏幕滾動事件給 #footer 賦值

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

首先設置 #footer 的 position 的值為 absolute

然后用$(window).scroll() 來監(jiān)聽，再給 #footer 設置坐標( top 屬性)

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

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

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

把屏幕滾動到底部 $window scroll to bottom

把 #footer 的 position 屬性設置成 static (或者absolute)

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

監(jiān)聽 input 失去焦點事件 $().blur()

然后把 #footer 的 position 屬性設置成 fixed。

這樣就好了。。。。

總結來說就是觸發(fā)虛擬鍵盤的時候把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"
             })
        }

GPU云服務器云服務器 position:fixed 數據分析的一些方法的解決方法解決問題的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113046.html

ios設備觸發(fā)虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

摘要：所以我也不用這種方式了。。監(jiān)聽失去焦點事件然后把的屬性設置成。這樣就好了。。。。總結來說就是觸發(fā)虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...

melody_lql 2019-08-01 18:26 評論0 收藏0
ios設備觸發(fā)虛擬鍵盤輸入后position:fixed 無效的一些簡單另類的解決方法。

摘要：所以我也不用這種方式了。。監(jiān)聽失去焦點事件然后把的屬性設置成。這樣就好了。。。。總結來說就是觸發(fā)虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...

jackzou 2019-06-28 18:20 評論0 收藏0
第六天移動端Web開發(fā)注意事項

摘要：隨著移動互聯網的發(fā)展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。隨著移動互聯網的發(fā)展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...

妤鋒シ 2019-08-30 13:09 評論0 收藏0
第六天移動端Web開發(fā)注意事項

摘要：隨著移動互聯網的發(fā)展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動開發(fā)需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續(xù)更新。隨著移動互聯網的發(fā)展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發(fā)上面臨的各種機遇與挑戰(zhàn)，本文就一些常見移動端問題對移動Web開發(fā)需要注意...

xbynet 2019-08-01 15:58 評論0 收藏0