首頁  >  文章  >  web前端  >  在js中如何解決軟鍵盤遮擋輸入框

在js中如何解決軟鍵盤遮擋輸入框

亚连
亚连原創
2018-06-19 17:12:292662瀏覽

下面我就為大家推薦一篇js解決軟鍵盤遮擋輸入框的問題分享,具有很好的參考價值,希望對大家有幫助。

經驗須知

# 彈出軟鍵盤時:

ios端$('body').scrollTop()會改變

android端$(window).height()會改變

拉起鍵盤不是一瞬間,而是有一個緩動過程

問題重現

ios端,經常會出現輸入法遮蔽輸入框的問題(特別是那種有一個白色頂部的輸入法,如:百度輸入法),如圖:

#問題解決

我們只需要在輸入框對焦之後,開啟一個定時器,執行$('body').scrollTop(1000000),這樣由於整個body滾動到了最下面,輸入框自然就看見了,具體請查看以下示例

範例原始碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
  <title>demo</title> 
  <script src="../js/jquery-1.11.3.min.js"></script>
  <style> 
    * { 
      margin: 0;  
      padding: 0; 
    } 
    body, html { 
      width: 100%; 
      height: 100%;
    } 
    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 0;
    }
    input {
      font-size: 14px;
      box-sizing: border-box;
      width: 50%;
      height: 50px;
      line-height: 50px;
    }
  </style> 
</head> 
<body>
  <p class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
    <input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
  </p>
</body> 
<script> 
  $(function() {
    // 解决输入法遮挡
    var timer = null;
    $(&#39;.bInput&#39;).on(&#39;focus&#39;, function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $(&#39;body&#39;).scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue vuex vue-rouert 權限路由(詳細教學)

在Angular中如何實作orderBy排序與模糊查詢

在Angular中如何實作敏感文字提示

#在Angular中如何實作隱藏顯示

##在js中如何實作圖片左右滑動#

以上是在js中如何解決軟鍵盤遮擋輸入框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn