如何用 js 获取虚拟键盘高度？（适用所有平台）

前言

这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？

别急，别急，接下来我们一起来扒一扒关于软键盘高度和 input 的问题

我们先来看一个短片认识一下这个问题

问题描述：当操作者进行输入操作的时候，弹起的软键盘把原本的输入框遮挡了，导致操作者看不到操作结果

以往的解决方案

以往的解决方案：

1. 修改网站的页面布局，比如本例中 twitter 尽量把 input 放置在中部以上的位置，从布局上尽量避免此类问题

2. 在一些指定设备和浏览器中异步获取 window.innerHeight 进行前后对比而得出键盘高度

再来看一下另一种常见输入框的页面布局：

在这个场景里，输入框定位在页面的最底部，当软键盘弹起时整个视图窗口页面向上卷动，到达最底部时停止。恰巧当我们用 h5 来模拟这个效果的时候刚好勉强做到。

这是因为当你首次 fouse 到输入框的时候软键盘弹出，浏览器会使页面会向上滚动，以确保 input 是可见的，该特性和 document.body.scrollIntoViewIfNeeded 方法是一致的，但是当你 body 的可滚动高度超过窗口高度时还会产生另一个问题：固定元素将随页面滚动 如下图

因此浏览器关心的只是 input 是否被覆盖？实际上是 input 中的光标位置！那么这就解释了为什么输入框在底部的时候刚好勉强完成了，因为 input 在页面的底部时，软键盘弹出势必会遮挡住 input，因而浏览器会向上滚动至输入框可见的位置。

但是如下图的效果这样就无法做到了，因为在输入框的下面还有一行工具栏，也就是说输入框并非在最底部的位置，那么浏览器在滚动到可视位置时只会确保到 input 可见，而对于工具栏是否可见则并不在浏览器的考虑范围内。

IOING 的解决方案分析

综合来看上面两种布局方案的问题，都不能完美解决输入被键盘遮挡和底部 footer 不能被顶起的问题，那是不是就没得法子了࿱