手机端input获取焦点弹出键盘时挡住input解决方案

问题重现

原始页面：页面中有header、main、footer三部分，其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部。

其中，footer 中有一个input 输入框。

点击 input 框使之获取焦点，唤起虚拟键盘，正常页面效果如下：

注：在ios系统唤起软键盘，键盘和底部输入框之间有一块空白间距。

但是偶尔会出现软键盘挡住input框的情况，如下：

针对此问题，目前没有十分有效的方法，只能通过js调整input输入框的位置，使之出现在正常的位置。

解决方法

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；

alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。

支持的浏览器：IE、Chrome、Firefox、Safari和Opera。

该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效：

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(LineCount)

 

代码如下：(使用setTimeout注意修改this值)

再次测试，效果如下：

相比于input被挡住，突兀地出现在页面中间更加可以令人接受

针对input输入框被虚拟键盘挡住的问题，还有一个类似的解决方案：

当软键盘被唤起是，使用 scrollTop() 方法使input元素滚动到指定的位置，但是滚动的具体数值需要调试才能给出，所以这里就不再演示了。