摘要：問題概述問題移動端輸入框鍵盤喚起后定位好的元素跟隨頁面滾動了起來屬性失效了滿屏任性橫飛如下圖問題有第三方輸入法的機還會出現鍵盤彈出延遲，導致普通布局輸入框等位置靠下的被鍵盤擋住如下圖這個完成出來然后鍵盤再頂起完美解決方案在輸入框獲取焦點

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

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

(這個"完成"出來, 然后"鍵盤"再頂起)

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

// HTML

    

        

            
        
    


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

不讓頁面整體滾動, 絕對布局滾動內容, 局部滾動.

鍵盤完全彈出時, 判斷鍵盤是否在可視區域(即屏幕除去鍵盤占用的區域)

通過js來調整輸入框的位置;

鍵盤完全收起后, 調整鍵盤到頁面底部;

// HTML
 
    
    

        
    
    
    
    

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

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

     // 輸入框獲取焦點, 鍵盤完全彈出再調整輸入框位置(因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 奇葩現象

    // 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)

最后建議(ios已經完美解決, 此建議可酌情忽略了), 類似這種需求,盡量不要放在屏幕下50%

轉場輸入評論, 微博等;

彈窗到可視區域上50%區域, 3G門戶;