app内嵌h5---iphone软键盘遮挡输入文字

1.产生问题的原因

在ios中，软键盘在页面最上层，软键盘的弹起不会引起窗口高度的变化，故而会遮挡原本处于最底部的输入框。

但是在android下，软键盘与窗口处于同一层，所以当软键盘弹起时，当前窗口会发生变化，故而不存在这个问题。

2.如何监听软键盘的弹出和隐藏
在ios中聚焦的时候软键盘会弹起，失去焦点的时候软键盘会收起

3.解决方案
（1）scrollIntoView
（2）监听聚焦和失焦的情况
（3）使用这个scrollIntoView，需保证当前输入框在原本的可视区域外

handleFocus(elem) {
   console.log('软键盘弹起')
   document.body.style.height = '100vh' + 软键盘高度
   document.querySelector('.' + elem).scrollIntoView();
  }
},
handleBlur() {
  document.body.style.height = '100%'
  console.log('软键盘隐藏')
}

4.关于scrollIntoView的介绍

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
参考链接：MDN—scrollIntoView