jsでソフトキーボードが入力ボックスをブロックする問題を解決する方法

小云云
リリース: 2017-12-20 09:56:02
オリジナル
3235 人が閲覧しました

この記事は主に、ソフト キーボードが入力ボックスをブロックする問題に対する js 解決策を推奨します。これは良い参考値であり、皆さんに役立つことを願っています。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

体験記

ソフトキーボードがポップアップすると:

$('body').scrollTop()がiOS側で変更されます

$(window).height()がAndroid側で変更されます

プルキーボードを上げるのは一瞬ではなく、代わりに緩和プロセスがあります

問題が再発します

iOS側では、入力メソッドが入力ボックスをブロックするという問題がよく発生します(特に上部が白い入力メソッド、 Baidu 入力メソッドなど)、図に示すように:

問題は解決しました

入力ボックスにフォーカスが当たった後にタイマーを開始し、$('body').scrollTop(1000000) を実行するだけです。このように本文全体が一番下までスクロールされるので、自然に入力ボックスが表示されます。詳しくは、次の例を確認してください

サンプルソースコード

<!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;
    $('.bInput').on('focus', function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $('body').scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script> 
</html>
ログイン後にコピー

関連推奨事項:

の実装方法の分析Android でソフト キーボードを非表示および表示し、キーボードが自動的にポップアップしません

モバイル ソフト キーボードは、ポップアップ時のレイアウトに影響します

JS はカスタムのシンプルな Web ページのソフト キーボード効果コードを実装します_javascript スキル

以上がjsでソフトキーボードが入力ボックスをブロックする問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!