首页 > 微信 > 详细

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

时间:2021-04-28 16:12:51      阅读:17      评论:0      收藏:0      [点我收藏+]
安卓端:
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、微信端)的 软键盘弹出问题

原文:https://www.cnblogs.com/zhenfeng95/p/14713779.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!