溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js解決軟鍵盤遮擋輸入框的問題分享

發(fā)布時(shí)間：2020-09-26 15:39:52 來源：腳本之家 閱讀：193 作者：vcxiaohan2 欄目：web開發(fā)

經(jīng)驗(yàn)須知

彈出軟鍵盤時(shí)：

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

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

拉起鍵盤不是一瞬間，而是有一個(gè)緩動過程

問題重現(xiàn)

ios端，經(jīng)常會出現(xiàn)輸入法遮擋輸入框的問題(特別是那種有一個(gè)白色頂部的輸入法，如：百度輸入法)，如圖：

js解決軟鍵盤遮擋輸入框的問題分享

問題解決

我們只需要在輸入框聚焦之后，開啟一個(gè)定時(shí)器，執(zhí)行$(‘body').scrollTop(1000000)，這樣由于整個(gè)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>
  <div class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后會被輸入法遮擋" />
    <input class="bInput" type="text" placeholder="ios聚焦后不會被輸入法遮擋" />
  </div>
</body> 
<script> 
  $(function() {
    // 解決輸入法遮擋
    var timer = null;
    $('.bInput').on('focus', function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $('body').scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>

以上這篇js解決軟鍵盤遮擋輸入框的問題分享就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手