莫著急... 美好的東西往往來的都比較慢!

30 Sep, 2017

HTML5 表單元素在 Android 下被軟鍵盤遮擋問題解決思路

發現問題

最近在工作項目中發現,html表單元素獲得焦點時,移動端 Android 系統下自動彈出的軟鍵盤會遮擋住表單元素。

這直接導致當頁面高度在一屏以內,或表單元素無法通過滾動頁面而移動時,用戶無法在輸入過程中看到元素本身內容。

這個問題在 IOS 下由于其自身的軟鍵盤bug問題,反而不受影響。但很明顯,這樣的交互效果對于 Android 用戶是很差的。

解決思路

發現這個問題后,我先嘗試上網查詢了一下大家遇到此類問題的解決辦法,發現如果是原生app開發時可以通過設置 <activity>標簽定位屬性來控制。但是對于 html 來講,通過 js 控制軟鍵盤比較困難。

繼續查找后發現下面這篇帖子:

有沒有對web移動端安卓鍵盤遮擋輸入框一類的原理詳細介紹的博客

因為 window.innerHeight 可以獲得不計算軟鍵盤在內的窗口高度,受其啟發我嘗試了更換思路。通過對比“元素的縱坐標(相對于窗口)”與“窗口高度(不計軟鍵盤)”的大小,來控制元素的定位。

最終得到了較為滿意的效果。


需要注意的是:

  1. 因為軟鍵盤彈出是動畫效果,所以需要設置 setTimeout 延遲獲取 window.innerHeight 。

  2. JS獲取 offsetTop 屬性是相對于父元素定位的,通常需要獲取位置的元素都不是在最外層,而遍歷上級元素的offset相關屬性將導致影響腳本效率。這里使用瀏覽器接口 getBoundingClientRect 更加高效。

  3. getBoundingClientRect 瀏覽器兼容性:

    ChromeFirefoxInternet ExplorerOperaSafari
    1.03.0 (1.9)4.0(Yes)4.0
    • 語法:obj.getBoundingClientRect().top ;

    • IE 中只能獲得 lefttopbottonright的屬性值,而現代瀏覽器還能獲取到元素的 width 和 height ;

    • bottom & right是元素底部(/右側)相對于窗口頂部(/右側)的距離,不是像css里面position的bottom相對于窗口底部。


  • 上一篇:移動端UI&微信UI前端框架YDUI
  • 下一篇:沒有了
  • 029-68787028,4000-613-001 & [email protected]

    西安市高新區灃惠南路與科技七路交匯處西南角, 西水·水岸陽光1號樓1-604號

    重庆时时彩是正规的吗?