js手机键盘遮挡_彻底解决H5中键盘遮挡输入框的问题

问题描述

在移动端 H5 开发中，我们经常会碰到输入框固定在页面底部的布局情况，比如聊天应用，文章评论等。当我们点击输入框输入文字时，系统会弹出虚拟键盘以便输入内容，这个时候会有几种情况出现：输入框随着页面移动到键盘的上面，显示正常；

输入框被键盘挡住，收起键盘，再次点击输入框后和情况1一样；

输入框被键盘挡住，后续的收起/打开都依然是挡住的；

输入框没有被键盘挡住，但收起键盘后页面不会回落；

。。。

解决方案

只要是输入框在页面底部的就会有这些问题出现，下面我们分情况来寻找解决方案。

Android

Android 下解决起来比较简单，我们可以借助 Element.scrollIntoView() 这个方法来解决。顾名思义，这个方法的作用就是让当前的元素滚动到浏览器窗口的可视区域内，正是我们想要的效果。用之前我们要先看一下兼容性：

别怕，标1的只是不支持 smooth 选项，这个我们也用不到。所以除了一些非常老的机器都是支持的，兼容性没问题。

那么怎么用呢？这里我们要把 scrollIntoView() 的第一个参数设为 false，意思是元素的底端将和其所在滚动区的可视区域的底端对齐，具体可以查看 MDN 的文档。

// Syntaxelement.scrollIntoView();

element.scrollIntoView(alignToTop); // Boolean parameterelement.scrollIntoVie