解決Android軟鍵盤彈出覆蓋h5頁面輸入框問題

更新時間：2018年05月22日 10:20:27 作者：進軍的蝸牛

之前我們在使用vue進行 h5 表單錄入的過程中，遇到了Android軟鍵盤彈出，覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家,感興趣的朋友跟隨腳本之家小編一起學習吧

之前我們在使用vue進行 h5 表單錄入的過程中，遇到了Android軟鍵盤彈出，覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家:

系統(tǒng)：Android

條件：當輸入框在可視區(qū)底部或者偏下的位置

觸發(fā)條件：輸入框獲取焦點，彈出軟鍵盤

表現(xiàn)：軟鍵盤覆蓋 h5頁面中的輸入框

問題分析：

1.發(fā)現(xiàn)問題：當前頁面中box為flex布局，內(nèi)容為上下固定高，中間自適應（中間區(qū)域內(nèi)容過多會出現(xiàn)滾動條，input框在wrapper的底部），input獲取焦點，手機鍵盤彈出，input未上移到可視區(qū)內(nèi)，懷疑是flex布局導致。

h5頁面測試代碼如下：

<html lang="en"> 
 <head>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>  <style>   html,body{    
    width:100%;    
    height:100%;    
    margin:0;    
    padding:0;   
   }   .box{    
    display:flex;    
    flex-direction:column;    
    width:100%;    
    height:100%;   
   }   .header{    
    height:50px;    
    width:100%;    
    background:#368CDA;    
    text-align:center;    
    line-height:50px;    
    font-size:20px;    
    color:#fff;   
   }   .wrapper{    
    flex:1;    
    overflow:auto;    
    width:100%;   
   }   .content {    
    margin:0;    
    padding:0;   
   }   .content li{    
    margin:0;    
    padding:0;    
    list-style:none;    
    height:150px;    
    background:#FFCC99;    
    text-align:center;    
    line-height:150px;    
    font-size:20px;    
    color:#fff;   
   }   .content li:nth-child(2n){    
    background:#CC99CC   
 }  
     .t-input{    
    width:300px;    
    height:50px;    
    border:1px solid #FF0000;   
   }   .footer{    
    width:100%;    
    height:48px;    
    background: #368CDA;    
    text-align:center;    
    line-height:48px;    
    font-size:18px;    
    color:#fff;   
   }  
 </style> 
 </head> 
 <body>
  <div class="box">   
 <div class="header">頭部</div>  
  <div class="wrapper">    
 <ul class="content">    
 <li>內(nèi)容區(qū)</li>    
 <li>內(nèi)容區(qū)</li>    
 <li>內(nèi)容區(qū)</li>    
 <li>內(nèi)容區(qū)</li>    
 <li>內(nèi)容區(qū)</li>  
 </ul>    
 <input type="text" class="t-input" placeholder="輸入框">  
 </div>   
 <div class="footer">保存</div> 
  </div> 
 </body>
</html>

2.修改布局：去除box中的flex布局，將wrapper、footer通過position:absolute的方式定位在頁面中，發(fā)現(xiàn)input依舊不上移，判定與flex布局無關，代碼修改如下：

<style> 
 .box{ /*display:flex; flex-direction:column;*/  
 width:100%;  
 height:100%;  
 position:relative; } 
 .wrapper{/*flex:1; */ 
 overflow:auto;  
 width:100%;  
 // 通過同時設置top、bototm，撐開wrapper，使之占屏幕除header和footer外的剩余高  
 position:absolute;  
 top:50px;  
 bottom:48px; 
} 
.footer{ width:100%;  height:48px;  background: #368CDA;  text-align:center;  line-height:48px;  font-size:18px;  color:#fff;  position:absolute;  bottom:0; } 
</style>

3.真機模擬：進行真機與電腦連接調(diào)試，打開chrome的chrome://inspect，(如下圖所示)，發(fā)現(xiàn)鍵盤未彈出時html高度為512px，鍵盤彈出后html的高度為288px(減少區(qū)域的為軟鍵盤區(qū)域)，懷疑是否是因為html、body設置了height:100%的自適應布局后,高度跟隨屏幕的可用高度改變而改變導致的。

4.代碼調(diào)試：去除body的height:100%，給body添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，body高度 = 288(軟鍵盤出現(xiàn)后html高度)+50(輸入框高度)+48(保存按鈕高度) ，發(fā)現(xiàn)鍵盤彈出遮擋著input后，input框會自動上移到可視區(qū)內(nèi)，問題定位成功。

解決方案：

方案1 頁面渲染完成后，通過JS動態(tài)獲取屏幕可視區(qū)高度（注：屏幕旋轉后，需重新獲取屏幕高度并賦值），并將其賦值到body的height，這樣body的高度一直都是屏幕的高度，當軟鍵盤彈出后，會將body向上推（因為body有了固定高度，不會再繼承html的自適應高度），使輸入框置到可視區(qū)內(nèi)，代碼如下：

document.body.style.height = window.screen.availHeight +'px';

方案2 我們可以借助元素的 scrollIntoViewIfNeeded（） 方法，這個方法執(zhí)行后如果當前元素在可視區(qū)中不可見，則會滾動瀏覽器窗口或容器元素，最終讓它可見，如果當前元素在可視區(qū)中，這個方法什么也不做，代碼如下：

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

總結

以上所述是小編給大家介紹的解決Android軟鍵盤彈出覆蓋h5頁面輸入框問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: