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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐