最近在開發(fā)手機(jī)網(wǎng)頁是遇到手機(jī)輸入框獲取焦點(diǎn)是軟鍵盤遮擋輸入框的問題寨典，如下：
問題1、測試幾款安卓機(jī)房匆，當(dāng)軟鍵盤彈出后頁面無法滾動
問題2耸成、iphone（5c,6,6 plus）手機(jī)獲取焦點(diǎn)時(shí)，手機(jī)會有部分滾動
問題3浴鸿、iphone（5c,6,6 plus）使用手機(jī)默認(rèn)輸入法井氢，手機(jī)會自動滾動
安卓手機(jī)解決辦法
微信UI框架weui中給出了解決方法：
weui框架
http://weui.github.io/weui/example.js
// .container 設(shè)置了 overflow 屬性, 導(dǎo)致 Android 手機(jī)下輸入框獲取焦點(diǎn)時(shí), 輸入法擋住輸入框的 bug
// 相關(guān) issue: https://github.com/weui/weui/issues/15
// 解決方法:
// 0. .container 去掉 overflow 屬性, 但此 demo 下會引發(fā)別的問題
// 1. 參考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手機(jī)下, input 或 textarea 元素聚焦時(shí), 主動滾一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
})
}
iphone手機(jī)解決方法
1、用手機(jī)自帶輸入法的情況下不會出現(xiàn)此問題
2岳链、手機(jī)安裝搜狗輸入法花竞，百度輸入法（只測過這2個(gè)）還是會出現(xiàn)此問題，再是沒找到好的方法
