html5 虛擬鍵盤彈出擋住底部的輸入框解決方案

問題描述：

　　咱們使用 h5 作移動網站開發時，若是文本框在頁面的下方，當輸入信息彈出的軟鍵盤會將輸入框擋住（Android 會有這個問題，IOS會自動將整個頁面上移），IOS中軟鍵盤關閉後，頁面上移的部分不會自動下移，體驗不是很好。

解決方案：

　　能夠藉助元素的 scrollIntoView() 方法。scrollIntoView()能夠在全部的HTML元素上調用。調用該方法後，則被調用的元素會出如今視圖窗口中，而且元素會和視圖窗口的頂部齊平。

代碼實例：

　　問題： 頁面中有一個textarea 在頁面的底部，軟鍵盤彈出時會遮擋住textare.

　　解決思路：

　　　　　　1. 在textarea focus時調用scrollIntoView()方法

　　　　　　2. 軟鍵盤關閉後，即獲取到textarea blur 時將頁面滾動到頂部（解決ios 頁面不自動下移的問題）

　　　　　　3. 代碼以下：

　　　　　<div style="height:800px"></div>
        <textarea onfocus="focusBlur('focus')" onblur="focusBlur('blur')"></textarea>
        <div style="height:300px"></div>
        <script>
            function focusBlur(state){
                if(state == 'focus'){
                   // document.querySelector('textarea').scrollIntoView();
                }else{
                    window.scroll(0,0); //頁面返回到頂部
                }
            }
        </script>