資訊專欄INFORMATION COLUMN
摘要：所以我也不用這種方式了。。監聽失去焦點事件然后把的屬性設置成。這樣就好了。。。。總結來說就是觸發虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回
首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點擊了輸入框之后的情況，就是要解決此問題~！
百度了一下解決方法，好像有以下的一些方法：
iscroll
Jquery Mobile
監聽屏幕滾動事件給 #footer 賦值
由于本人新手，第1，2種的方法就沒學過，所以暫時不用這2方法，來看第三種：監聽屏幕滾動事件給 #footer 賦值
首先設置 #footer 的 position 的值為 absolute
然后用$(window).scroll() 來監聽，再給 #footer 設置坐標( top 屬性)
不過這方法我感覺有點不好，就是ios設備在拖動屏幕的時候，頁面DOM的操作會被掛起，就是說你手指滾動屏幕的時候頁面會定死，當你的手指離開了屏幕后，dom的操作才執行。所以我也不用這種方式了。。
下面說下我用的另類方式，
監聽input輸入框獲取焦點事件 $().focus()
把屏幕滾動到底部 $window scroll to bottom
把 #footer 的 position 屬性設置成 static (或者absolute)
這樣 #footer 就會定位到最底部（但不是固定） 為什么我要這么做呢？ 因為呢，移動設備彈出虛擬鍵盤的時候，頁面可見的地方已經很少了，一般情況在輸入的狀態下是不會拖動屏幕的了，所以就采用這種方式。
監聽 input 失去焦點事件 $().blur()
然后把 #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"
})
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/28173.html
摘要：所以我也不用這種方式了。。監聽失去焦點事件然后把的屬性設置成。這樣就好了。。。?？偨Y來說就是觸發虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回 首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...
摘要：所以我也不用這種方式了。。監聽失去焦點事件然后把的屬性設置成。這樣就好了。。。?？偨Y來說就是觸發虛擬鍵盤的時候把屬性改成虛擬鍵盤消失的時候再把屬性改回 首先看一下我要解決的問題，第一張圖是正常的情況下，第二張圖是點擊了輸入框之后的情況，就是要解決此問題~！ showImg(https://segmentfault.com/img/bV2DxT?w=699&h=453);百度了一下解決方...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
閱讀 2430·2021-10-11 10:57
閱讀 1279·2021-10-09 09:59
閱讀 1998·2019-08-30 15:53
閱讀 3212·2019-08-30 15:53
閱讀 1008·2019-08-30 15:45
閱讀 738·2019-08-30 15:44
閱讀 3446·2019-08-30 14:24
閱讀 954·2019-08-30 14:21
