键盘到上面遮住输入框，怎么解决

发布网友发布时间：2022-04-21 21:31

共1个回答

热心网友时间：2023-05-29 13:16

我们先来看看效果：
当用户点击输入框时，输入框会弹到数字键盘正上方。这样就完美的解决了键盘遮挡输入框的问题。

当输入框获得焦点时，如果这个输入框被挡住，就在页面最底部增加一个空白div，这个div的高度就是被遮住的输入框到数字键盘顶部的距离。当输入框失去焦点时，就移除这个新增的div。
难点：新增div高度的计算

可以看上面这个草图，最后我们需要计算出Z的值，这个Z就是底部新增div的高度。

（1）可视区域高度的计算（visible）

（2）输入框到页面顶部的距离（toTop）

（3）滚动高度（hide）
遇到的坑：我看到网上有很多人都用这个方法，但是我这样使用的时候打印出来的值不论怎样都是0。

思考了很久才发现一个问题，就是如果我们要获取滚动高度，必须满足两个条件，即该元素要有滚动条并且滚动条发生了滚动。上面那种方法获取的是body的滚动高度，但是这个页面的body并没有发生滚动，发生滚动的是一个class为content的元素，像下面这样就能获取到滚动高度了：

（4）数字键盘高度（keyboard）
遇到的坑：刚开始我给了这个keyboard一个固定的值，在chrome上调试是正常的，但是放到真机上就不行了。因为这个keyboard的高度是动态变化的，宽一点的手机这个高度就会高一些，窄一点的手机这个高度就会小一点。因为项目里采用rem适配方法，不同的机型fontSize是变化的，所以我们要计算键盘的真实高度，就要根据这个fontSize来计算,如下图所示

（5）创建div插入页面中，并将滚动条滚动到指定高度
将Z计算出来，就可以创建一个高度为Z的div。记住在每次将创建的dev append到页面中的时候，要让滚动条滚动一定的高度，这样才能让被遮挡的输入框正好弹到键盘上面。