问题描述
工作做了一个手机使用编辑器编辑文章的功能,ios弹出键盘,不能将编辑器顶上去。安卓端没有问题。
原因分析:
苹果弹出功能并不会将视口变小,从而导致虚拟键盘将编辑器覆盖,安卓的处理是将视口变小,将编辑器顶在虚拟键盘之上。
解决方案:
使用window.visualViewport监听高度变化,当高度小于视口高度说明虚拟键盘弹出,用视口高度减去头部以及visualViewport高度就得到了键盘高度。
// 使用window.visualViewport来监听高度变化
keyboardUp () {
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
const innerH = window.innerHeight
if(isIOS){
const handler = ()=>{
if(!window.visualViewport) return
const height = window.visualViewport.height
this.elEditor.then(res=>{
if(height < innerH) {
res.style.bottom = (innerH-height-67)+'px'
}else if(height == innerH) {
res.style.bottom = 0
}
})
}
window.visualViewport.addEventListener('resize',handler)
}
}