移動端開發中android手機輸入框擷取焦點，軟鍵盤彈出會遮擋表單如何解決

一、需求問題

在移動端開發的表單頁面當中，在

android

手機上，當點選表單頁面的輸入框以後，擷取焦點，軟鍵盤彈出，會覆寫住表單頁面的輸入框，會出現這樣的問題。

二、需求分析

這種問題出現在

android

手機上，當輸入框在可視區域底部或者偏下的位置，輸入框擷取焦點彈出軟鍵盤，軟鍵盤覆寫表單頁面中的輸入框。這個也是

android

手機經常遇到的問題。

1. 第一種方法：我們可以在頁面渲染完成後，通過JS動态擷取螢幕可視區高度，同時螢幕旋轉後，也需重新擷取螢幕高度并指派，并将其指派到

   bod

   的

   height

   ，這樣

   body

   的高度一直都是螢幕的高度，當軟鍵盤彈出後，會将

   body

   向上推，這也是因為

   body

   有了固定高度，不會再繼承

   html

   的自适應高度，使輸入框置到可視區内。在

   vue

   項目中，在

   created

   鈎子函數，頁面初始化完成的時候，擷取螢幕的可視化高度，并且将獲得的可視化高度進行指派就可以了。
2. 第二種方法：我們可以借助元素的

   scrollIntoViewIfNeeded()

   方法，這個方法執行後如果目前元素在可視區中不可見，則會滾動浏覽器視窗或容器元素，最終讓它可見，如果目前元素在可視區中，這個方法就什麼都不做。
3. 第三種方法：我們可以利用捕獲事件監聽輸入框等

   focus

   操作。
4. 第四種方法：監聽

   resize

   事件，然後定位到

   input

   輸入框，也可以了解為監聽

   input

   狀态，螢幕滾動到

   input

   ，上下居中。

三、需求實作

1. 第一種方法的代碼實作：

vue的實作：

created() {
      // 擷取.box的可視區域的高
      let flexheight = document.documentElement.clientHeight;
      // 在頁面整體加載完畢時
      window.onload = () => {
        // 把擷取到的高指派給.box
        document.getElementByclassName('box').style.height = `${flexheight}px`;
      };
}
           

2. 第二種方法的代碼實作：

window.addEventListener('resize', () => {
        if (document.activeElement.tagName == 'INPUT') {         
            //延遲出現是因為有些 android 手機鍵盤出現的比較慢
             window.setTimeout(() => {             
                document.activeElement.scrollIntoViewIfNeeded();
             }, 100);
         }
});
           

3. 第三種方法的代碼實作：

var clientHeight = document.body.clientHeight;
    //輸入框焦點
    var _focusElem = null; 
    
    //利用捕獲事件監聽輸入框等focus動作
    document.body.addEventListener("focus", function(e) {
        _focusElem = e.target || e.srcElement;
    }, true);
    
    //因為存在軟鍵盤顯示而螢幕大小還沒被改變，是以以窗體的螢幕顯示大小改變為準
    window.addEventListener("resize", function() {
        if (_focusElem && document.body.clientHeight < clientHeight) {
            //焦點元素滾動到可視範圍的底部，false為底部，true為頂部
            _focusElem.scrollIntoView(false);
        }
    });
           

4. 第四種方法的代碼實作：

//監聽input狀态，螢幕滾動到input，上下居中
//在安卓手機上螢幕尺寸變化會産生resize事件，是以監聽resize事件，然後定位到input框
window.addEventListener('resize', function () {
    if(document.activeElement.tagName === 'INPUT'){
        document.activeElement.scrollIntoView({behavior: "smooth"})
	}
 })