微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法
程序员文章站
2023-10-27 14:42:58
因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了。我的处理办法就是在键盘弹起和消失的时候,让页面都回到弹起之前的状态,使用了window.scrollTo方法。 keyUpClose () { ......
因为在ios微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了。我的处理办法就是在键盘弹起和消失的时候,让页面都回到弹起之前的状态,使用了window.scrollto方法。
keyupclose () {
let u = navigator.useragent;
let state; // 记录状态当关闭键盘时平滑滚动(smooth)一次页面
let myfun;
let isios = !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/);
if(isios){
document.body.addeventlistener('focusin', () => { //软键盘弹起事件
state=true;
cleartimeout(myfun);
})
document.body.addeventlistener('focusout', () => { //软键盘关闭事件
var scrolltop = document.documentelement.scrolltop||document.body.scrolltop;
state=false;
if(!state){
myfun= settimeout(function(){
window.scrollto({top:scrolltop,left:0,behavior:"smooth"})//重点 ----当键盘收起的时候让页面回到原始位置(这里的top:scrolltop
回到了弹窗弹起前状态)
},200);
}else{
return
}
})
}else{
return
}
}
上一篇: 秋分螃蟹为什么好吃?螃蟹的吃法有哪些?
下一篇: 国庆吃的菜有什么?