android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）

问题

如图一个表单：

在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起(ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域，这里不做讨论)

问题分析及解决办法确立

最常见的是使用两个方法：scrollIntoViewIfNeeded()、scrollIntoView()，使用方法自行百度。在我这里无效。

经测试发现android弹出键盘时有两种效果：

1.将activity挤压，键盘也占一部分activity空间；

2.键盘弹出在浏览器上面覆盖一层，不影响浏览器大小。

第二种会出现遮挡问题

于是想到以下两种方案：

1.通过动态增加页面高度和设置scrollTop来使输入框到达合适的位置

2.设置相对定位，通过top来使输入框到达合适的位置

影响实现的两个点：

1.js拿不到键盘的弹出和收起事件;

2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。

解决

第一种经试验有些问题影响了实现，这里只讨论第二种。

直接上代码，这里是react项目(css设置absolute配合js改变top实现效果，transiti