HTML5 - 虚拟键盘出现挡住输入框的解决办法

2016-09-21 发布：hangge 阅读：10902

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楼

2018-10-30 21:01

初心

移动端用jq？

站长回复：
用哪个库看个人喜欢，这个都无所谓，主要原理都一样。
5楼

2017-12-28 17:19

lsyAndroid

请问有示例代码吗？包括css如何设定》？

站长回复：
这个其实就是通过js自动移动滚动条，跟css没什么关系。你可以随便创建一个页面，把输入框放在页面下方就可以看到效果了。
4楼

2017-10-16 16:14

帆布鞋

确定吗？我怎么没有解决弹出的时候输入文字之后再次点击的时候还是有问题啊

站长回复：
当然了，我之前项目也都是这样做的。我怀疑是不是你页面中设了什么样式造成这个问题，建议创建个简单的页面测试下。
3楼

2017-10-13 17:49

胡杨

如果的document页面中 input框在最底部，input框弹不出来？是不是需要加高document页面的高度呢？

站长回复：
不需要再增加高度，按文中的方法设置后，点击输入框会自动将其移动的可视区域中。
2楼

2017-05-20 13:52

lee

高手，找了几百个网站，没有一个靠谱的，终于解决了Android手机弹出框被覆盖的问题

站长回复：
我也很高兴我的文章能帮助到你。
1楼

2017-04-21 16:07

zbcwz

学习了，很不错！！赞！

站长回复：
谢谢你的支持和鼓励。