移动端(安卓、ios、微信端)的 软键盘弹出问题

安卓端:
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、微信端)的 软键盘弹出问题

上一篇:微信公众开放平台开发01---微信公众平台介绍,以及开发准备


下一篇:微信公众开放平台开发06---复习一下servlet