完美解决移动端 Input 获取焦点软键盘遮挡文本框元素方法

发布于 2019-03-07 字数 779 浏览 889 评论 0

移动端 Input 文本框获取焦点后,会弹起软键盘输入,此时的窗口大小已发生改变,经过测试发现 iPhone 可以自动上滑页面,但是 Android 页面没有任何滑动。

HTML 5 有个函数可以实现页面滑动,Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内,于是就有了下面的方法。

window.addEventListener('resize', () => {
  const activeElement = document.activeElement
  if (activeElement.tagName === 'INPUT' ||
      activeElement.tagName === 'TEXTAREA') {
    setTimeout(() => {
      activeElement.scrollIntoView()
    }, 100)
  }
})

当 Window 窗口发生变化时候,获取当前的焦点元素(document.activeElement),然后使用 scrollIntoView 函数让当前的元素滚动到浏览器窗口的可视区域内。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!