文享日志

解决移动端输入,键盘弹起挡住输入框的问题

Vue.js

发表于2018年12月20日13:19:46

0条评论 94次阅读

首先要明确,当输入法弹出时,浏览器可视宽高会变,也就是会触发window.resize方法。

代码如下:

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

这里有个document.activeElement,获取的是页面上获得焦点的元素。

还有element.scrollIntoView方法,让当前的元素滚动到浏览器窗口的可视区域内

知道上面这两个,那代码就很好理解啦😄

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广