安卓端:
const originalHeight =
document.documentElement.clientHeight || document.body.clientHeight
if (this.$utils.getDeviceInfo().android) {
window.addEventListener(‘resize‘, () => {
//键盘弹起与隐藏都会引起窗口的高度发生变化
const resizeHeight =
document.documentElement.clientHeight ||
document.body.clientHeight
console.log(‘进入到判断页面高度=========‘)
console.log(‘页面初始高度=========‘ + originalHeight)
console.log(‘软键盘弹起高度=========‘ + resizeHeight)
let sub = Math.floor((originalHeight - resizeHeight) / 2)
if (resizeHeight - 0 < originalHeight - 0) {
//当软键盘弹起,在此处操作
console.log(‘进入到软键盘弹起=========‘)
document.querySelector(
‘.login-container‘
).style.height = `calc(100vh + ${sub}px)`
setTimeout(() => {
document.activeElement.scrollIntoView()
}, 0)
} else {
//当软键盘收起,在此处操作
console.log(‘进入到软键盘收起=========‘)
document.querySelector(‘.login-container‘).style =
‘height:100vh;‘
}
})
}
ios端:
if (this.$utils.getDeviceInfo().ios) {
// 在 ios 中执行下面监听事件,捕获 软键盘关闭事件。(isIOS 通过获取 navigator.userAgent就可以判断)
window.addEventListener(‘focusin‘, () => {
// 键盘弹出事件处理
window.scrollTo(0, originalHeight)
})
window.addEventListener(‘focusout‘, () => {
// 键盘收起事件处理
})
}
参考链接:https://www.cnblogs.com/wfblog/p/11403460.html
移动端(安卓、ios、微信端)的 软键盘弹出问题