(2016-11-04完美解決)移動端iOS第三方輸入法遮擋底部input及android鍵盤迴落後留白問題

時間 2019-11-06

標籤完美解決移動 ios 第三方輸入法遮擋底部 input android 鍵盤回落留白問題欄目無線简体版

原文原文鏈接

問題概述

問題1：H5 web 移動端輸入框, 鍵盤喚起後fixed定位好的元素跟隨頁面滾動了起來… fixed屬性失效了！滿屏任性橫飛, 以下圖:javascript

問題2：有第三方輸入法的ios機還會出現鍵盤彈出延遲，致使普通佈局輸入框(input/textarea等) 位置靠下的被鍵盤擋住, 以下圖:css

(這個'完成'出來, 而後'鍵盤'再頂起)html

2016-11-04完美解決方案

// CSS
.scrollWrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
}
bottomInput {
    position: absolute;
    bottom:0;
    left:0;
    right: 0;
}

// HTML
<body>
    <div class="scrollWrapper">
        <div class="bottomInput">
            <input type="text" placeholder="input"/>
        </div>
    </div>
</body>

// javascript
// 在輸入框獲取焦點, 鍵盤彈起後, 真的是一行代碼
var interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 100)

注意: 下面解決ios鍵盤問題的是以前的舊方法, 仍是有瑕疵, 可跳過看其餘

解決思路

問題1:

不讓頁面總體滾動, 絕對佈局滾動內容, 局部滾動.java

問題2:

鍵盤徹底彈出時, 判斷鍵盤是否在可視區域(即屏幕除去鍵盤佔用的區域)android
經過js來調整輸入框的位置;ios
鍵盤徹底收起後, 調整鍵盤到頁面底部;web

相關代碼

問題1:

// HTML
<body> 
    <!-- 能夠滾動的區域 -->
    <main className='scrollWrapper'>
        <!-- 內容在這裏... -->
    </main>
    
    <!-- fixed定位在底部的輸入框 -->
    <footer>
       <div className='inputBox' contenteditable='true' placeholder='請輸入評論'></div>
    </footer>
</body>

// CSS
.scrollWrapper {
    position: absolute;/* 絕對定位，進行內部滾動 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: atuo;/* 或者scroll */
    -webkit-overflow-scrolling: touch;/* 解決ios滑動不流暢問題 */
}
footer {
    position: fixed;
}

問題2:

緣由以下面兩張圖所示, 其實稍微注意一下, 能夠看到原生輸入法比第三方輸入法少了一個tool bar, 就是這個罪魁禍首:app

// 輸入框獲取焦點, 鍵盤徹底彈出再調整輸入框位置(因ios鍵盤彈出不會觸發resize事件, 故延時600ms)
     // 選擇setInterval輪詢幾回更好
     setTimeout(() => {
        // 掛載this上, 或者聲明一個全局變量, 用於在失去焦點時, 要不要執行調整代碼(非第三方不調整)
        this.inputIsNotInView = this.notInView()
        
        if (this.inputIsNotInView) {
            // Width, Height: 分別是鍵盤沒有彈出時window.innerWidth和window.innerHeight
            // 88: 是第三方輸入法比原生輸入法多的那個tool bar(輸入時顯示帶選項) 的高度, 作的不是太絕, 高度是統一的
            // ios第三方輸入法的tool bar 甚至 鍵盤也被看成可視區域了(包含在鍵盤彈出時的window.innerHeight)
            if (Width != 750) {
                let bottomAdjust = (Height - window.innerHeight - 88) + 'px'
                $(this.inputBoxContainer).css('bottom', bottomAdjust)
            }
            else {
                // 'iphone 6 6s, 須要額外減去鍵盤高度432(見下圖), 還算有良心, 高度和原生保持一致')
                let bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px'
                $(this.inputBoxContainer).css('bottom', bottomAdjust)
            }
        }
    }, 600)

--------------------------------------------------------------------------------------
   
    // 失去焦點, 鍵盤開始收起, 隱藏inputBox; 等鍵盤徹底收起, 再顯示inputBox, 設置在底部, 避免閃跳
    if (this.inputIsNotInView) {
        // display和opacity + bottom 會有閃跳
        $(this.inputBoxContainer).css({ 'opacity': 0, bottom: 0 })
        setTimeout(() => {
            $(this.inputBoxContainer).css('opacity', 1)
        }, 600)
    }

--------------------------------------------------------------------------------------
    //判斷元素是否在可視區域，不在的話返回true, 在返回false
    notInView() {
        // getBoundingClientRect 是獲取定位的，很怪異, (iphone 6s 10.0 bate版表現特殊)
        // top: 元素頂部到窗口（但是區域）頂部
        // bottom: 元素底部到窗口頂部
        // left: 元素左側到窗口左側
        // right: 元素右側到窗口左側
        // width/height 元素寬高
           let bottom = this.inputBoxContainer.getBoundingClientRect().bottom
           
           // 可視區域高度 - 元素底部到窗口頂部的高度 < 0, 則說明被鍵盤擋住了
        if (window.innerHeight - bottom < 0) {
            return true
        }
        return false
    }

iphone 6 和 6s 奇葩現象iphone

部分低端android機, 鍵盤收起後, 鍵盤區域顯示空白, 需從新設置height, 如圖:

// android, 鍵盤彈起/收回會觸發resize事件
    window.onresize = function () {
        // Height: 鍵盤沒有彈出時window.innerHeight
        if (Height == window.innerHeight) {
            $(this.scrollWrapper).css('height', window.innerHeight + 'px')
        }
    }

另外須要注意的是

js拿不到鍵盤的彈起/收起事件;佈局
ios上鍵盤彈起/收回不會觸發window.resize事件;
android 4.4 如下, 鍵盤喚起時, 不只會觸發resize, 並且會觸發scroll事件;
(若是有須要滑動失去焦點這個需求, 選擇touchMove, 不要選擇scroll)
ios之因此會遮擋輸入框, 是由於, 第三方輸入法的tool bar 或者鍵盤也被當作可視區域了(包含在鍵盤彈出時的window.innerHeight)