问题
如图一个表单:
在部分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