Mobile to resolve input blocking problems

People who have experience in mobile Web development should encounter this problem, a input at the bottom of the page or lower position, input due to the pop-up method, in some browsers because the window does not automatically calculate the height, resulting in input is blocked.
The solution of this article is to use scrolltop to solve, after input gets focus, set the body height dynamically and set ScrollTop to the specified position, so that input will scroll to the input method, lose focus and then restore the original position.
There are two types of situations:
1, input at the bottom of the page, there are no other elements, this case we can get the height of the window minus the height of input minus some of the free height, you can get the height should be scrolled, var scrollheight = $ (window). Height ()-$ (' Input '). Height ()-40, in which case it would be appropriate to do so, no problem.
2, however, sometimes input is not at the bottom, and then there are other elements, if you follow the previous way, when you scroll to input in the middle of the screen or in the upper part, because the scrolling distance is the last way to get, this time scrolling distance is greater than the distance should be scrolled, Causes input to be hidden directly above the page.
This time we change ideas, as long as a way to get input to the top border of the window can be, the other code is the same, then you can write, var scrollheight = $ (' input '). Offset (). top-$body. scrolltop ()- 40, which is the height of the input distance from the top of the page minus the body scroll height to get input from the height above the window.

Full code: Online Preview 1 online preview 2

<Divstyle= "height:1000px;"></Div>  <inputtype= "text"style= "width:100%;height:40px; ">  <Scriptsrc= "Https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></Script>  <Script>    varScrollHeight,//the distance that should be scrolled$body= $('Body')    $('input'). On ('Focus', function () {      //input distance from the top of the page minus the height of the body scroll to get input from the height above the window, 40 means the distance from the top of the space.scrollheight= $('input'). Offset (). Top-$body. scrolltop ()-  +Console.log (scrollheight)//first change the body height, scroll to the corresponding position$body. Height ($body. Height ()+scrollheight). Animate ({scrolltop: $body. scrolltop ()+ScrollHeight}, -); }). On ('Blur', function () {      //input reverts to its original position after losing focus$body. Animate ({height: $body. Height ()-scrollheight, ScrollTop: $body. scrolltop ()-ScrollHeight}, -)    })  </Script>

Mobile to resolve input blocking problems