Home > Article > Web Front-end > How to solve the problem that the soft keyboard blocks the input box in js

How to solve the problem that the soft keyboard blocks the input box in js

亚连Original: 2018-06-19 17:12:292655browse

Below I will recommend a js solution to the problem of soft keyboard blocking the input box. It has a good reference value and I hope it will be helpful to everyone.

Experience Notes

When the soft keyboard pops up:

ios End$('body').scrollTop() will change

android end$(window).height() will change

It’s not a moment when you pull up the keyboard, but there is a slow motion Process

Problem Reproduction

On the ios side, there is often a problem of the input method blocking the input box (especially the one with a white top input method, such as: Baidu input method), as shown in the figure:

Problem Solving

We You only need to start a timer after the input box is focused and execute $('body').scrollTop(1000000). In this way, since the entire body is scrolled to the bottom, the input box will naturally be visible. Please see the following example for details

Sample source code

<!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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

vue vuex vue-rouert permission routing (detailed tutorial)

How to implement orderBy sorting and blurring in Angular Query

How to implement sensitive text prompts in Angular

How to implement hidden display in Angular

How to realize left and right sliding of pictures in js

The above is the detailed content of How to solve the problem that the soft keyboard blocks the input box in js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About Vue.JS’s method of vertically expanding and contracting JS components of variable-height modulesNext article：About Vue.JS’s method of vertically expanding and contracting JS components of variable-height modules

See more

How to solve the problem that the soft keyboard blocks the input box in js

Related articles