您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:12-14来源:作者:点击数:
CDSY,CDSY.XYZ

移动端 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 函数让当前的元素滚动到浏览器窗口的可视区域内。

CDSY,CDSY.XYZ
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐