摘要：
有移动web开发经验的人应该会遇到这个问题。输入位于页面底部或下方。由于输入时弹出输入法，因此在某些浏览器中不会自动计算窗口的高度，因此输入被输入法阻止。本文中的解决方案是使用scrollTop。输入获得焦点后，将动态设置主体的高度，并将scrollTop设置到指定位置。这确保了输入将在输入法上滚动，并且在失去焦点后将恢复原始位置。
有过移动端web开发经验的人应该都会遇到这个问题，一个input在页面最底部或者偏下的位置，输入时由于输入法的弹出，在部分浏览器下由于不会自动计算window的高度，导致input被输入法挡住。
本文的解决方式是利用scrollTop来解决，在input获取焦点后，动态地设置body的高度并设置scrollTop到指定位置，这样可以保证input会滚动到输入法上方，失去焦点后再恢复原来的位置。
有两种情况：
1、input在页面最底部，后面没有其他元素，这种情况我们可以获取窗口的高度减去input的高度再减去一些空余高度，可以得到应该滚动的高度，var scrollHeight = $(window).height() - $('input').height() - 40，这种情况下这么计算很合适，没什么问题。
2、然而有时候input不是在最底部，之后还有其他元素，如果按照上一种方式，当你滚动到input在屏幕中间或者上部的时候，由于滚动距离还是上一种方式获取的，这个时候滚动距离会大于应该滚动的距离，导致input直接到页面上方被隐藏了。
这个时候我们换种思路，只要想办法获取input到窗口的上边框的距离即可，其他代码都一样，那么可以这么写，var scrollHeight = $('input').offset().top - $body.scrollTop() - 40，即input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度。
<div style="height: 1000px;"></div> <input type="text" style=" 100%;height: 40px; "> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var scrollHeight, //应该滚动的距离 $body = $('body') $('input').on('focus', function () { //input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度，40表示距离顶部留点空隙 scrollHeight = $('input').offset().top - $body.scrollTop() - 40 console.log(scrollHeight) //先修改body的高度，在滚动到对应的位置 $body.height($body.height() + scrollHeight).animate({scrollTop: $body.scrollTop() + scrollHeight}, 300); }).on('blur', function () { //input失去焦点后恢复到原来的位置 $body.animate({height: $body.height() - scrollHeight, scrollTop: $body.scrollTop() - scrollHeight}, 300) }) </script>