HTML5 - 虚拟键盘出现挡住输入框的解决办法
作者：hangge | 2016-09-21 09:00
1，问题描述
我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。）
2，解决办法
我们可以借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。
3，样例代码
这里使用了 jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢）
//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
最终效果：
全部评论（6）
移动端用jq？
站长回复：用哪个库看个人喜欢，这个都无所谓，主要原理都一样。
请问有示例代码吗？包括css如何设定》？
站长回复：这个其实就是通过js自动移动滚动条，跟css没什么关系。你可以随便创建一个页面，把输入框放在页面下方就可以看到效果了。
确定吗？ 我怎么没有解决 弹出的时候输入文字之后再次点击的时候 还是有问题啊
站长回复：当然了，我之前项目也都是这样做的。我怀疑是不是你页面中设了什么样式造成这个问题，建议创建个简单的页面测试下。
如果的document页面中 input框 在最底部，input框弹不出来？是不是需要加高document页面的高度呢？
站长回复：不需要再增加高度，按文中的方法设置后，点击输入框会自动将其移动的可视区域中。
高手，找了几百个网站，没有一个靠谱的，终于解决了Android手机弹出框被覆盖的问题
站长回复：我也很高兴我的文章能帮助到你。
学习了，很不错！！赞！
站长回复：谢谢你的支持和鼓励。