【移动web】ios浏览器键盘收起界面下方空白

最新推荐文章于 2021-10-15 17:57:05 发布

陪着月亮

最新推荐文章于 2021-10-15 17:57:05 发布

阅读量369

点赞数

分类专栏：移动web

本文链接：https://blog.csdn.net/xilejie/article/details/105650508

版权

移动web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

输入框输入内容，收起键盘时，iOS浏览器下会出现空白，上移的界面没有下移。测试过程中好像只有iOS出现这个问题，安卓没有。
在这里插入图片描述
解决办法：
页面中上下滚动1px。

// mounted中

//软键盘收起的事件处理
document.body.addEventListener("focusout", () => {
     let ua = window.navigator.userAgent;
     if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
         var currentPosition, flag;
         var dis = 1;
         flag = setInterval(function() {
         	currentPosition =document.documentElement.scrollTop ||document.body.scrollTop;
         	currentPosition -= dis;
         	window.scrollTo(0, currentPosition); //页面向上滚动
         	currentPosition += dis;
         	window.scrollTo(0, currentPosition); //页面向下滚动
         	clearInterval(flag);
         }, 100);
    } else if (ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1) {
         // 安卓
    }
});