iOS webview html5 移动端 软键盘d起遮挡输入框

移动web聊天页面，输入框在底部的时候，点击输入，d起软键盘，iOS在将页面推上的时候会回d一下，导致键盘刚好遮挡到输入框。

初次触发输入框的focus的时候，iOS 键盘默认是以英文键盘高度推上页面，但一般我们的默认输入是中文，会导致软键盘的高度变化，中文输入键盘高度高于英文，所以导致了遮挡。

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。

当键盘在切换中英输入法时，键盘高度变化仍然会引起键盘遮挡

监听输入框的 focus 、 blur 事件，当聚焦时，循环调用 input.scrollIntoViewIfNeeded 方法。

当监听到 blur 时，停止循环。

可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底

置底的按钮为fixed布局，观察得知，这样当键盘d起时，其实页面的高度被缩短成类似于这样

这样，始终置底的元素会遮盖住输入框，并且由于界面并没有长到可以滚动的地步，输入框非常正常地被遮住了

【解决办法】

首先，把置底元素设置成，在页面的底部而非屏幕的底部

然后，设置页面的高度，让按钮有置底的效果

注意有 最小高度 ，因为当键盘d起时，100vh是缩小的那部分的高度，而不是屏幕高度

*如果有大屏的需求，适配一下就好

这样，当键盘d起时，内容就是可以滚动的了，出于用户体验的需求，可以在focus输入框的时候，把滚动条划一下，露出输入框

具体的数值可以再调整

设置content为 overflow: auto

让content的高度为 100vh-buttonHeight

使用第二种的html

利用window.resize方法，这个方法的特性是：当调整浏览器窗口的大小时，发生 resize 事件。

screenHeightNoChange==true的时候使用方法三，当==false的时候，将button变成position:relative 就能解决问题了

以上，就是解决问题的方法了

我们先来看看效果：

当用户点击输入框时，输入框会d到数字键盘正上方。这样就完美的解决了键盘遮挡输入框的问题。

当输入框获得焦点时，如果这个输入框被挡住，就在页面最底部增加一个空白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到页面中的时候，要让滚动条滚动一定的高度，这样才能让被遮挡的输入框正好d到键盘上面。

---