H5移动端 IOS输入法遮挡input解决思路

思路

input 输入框置于页面底部，用absolute绝对定位于父级底部，在被唤起输入框时，会被IOS输入法自带的toolbar遮挡住input。

So，我的思路就是：点击input框后，延时出现，等IOS输入法唤起后，input在显示在可视区域范围内。

因此我需要用的到方法有：

setInterval

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

scrollIntoView

scrollIntoView是一个与页面（容器）滚动相关的API（官方解释），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况。
调用方法为 element.scrollIntoView() 参数默认为true。参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；参数为false时，使element的底部与视图（容器）底部对齐。
TIPS：页面（容器）可滚动时才有用！

JS 代码

//IOS input被输入法toolbar遮挡解决
 $('input').on('click', function () {
     var target = this;
     setInterval(function () {
         target.scrollIntoView(true);
      },100);
 });

由此 记录完毕。