vue使用popup弹出层组件时使用input造成ios不兼容问题

最新推荐文章于 2025-02-08 18:28:17 发布

原创最新推荐文章于 2025-02-08 18:28:17 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

随笔专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种解决iOS设备上使用Vue开发的混合应用中，软键盘遮挡底部弹出层并导致交互异常的解决方案。通过监听软键盘的弹出和关闭事件，实现软键盘关闭后页面自动滚动到顶部，从而修复了输入数据后的显示和点击问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做公司的混合app时有一个点击按钮弹出一个固定定位在底部的弹出层，只有弹出层时没问题可是弹出层里需要输入数据，就造成了bug 输完数据关闭软键盘后，软键盘的位置会显示空白遮挡住弹出层，并且弹出层无法被点击，经过查阅，监听软键盘的弹出和关闭事件关闭时把页面滑动一下即可恢复正常但是有点生硬总比以前强了

写在vue的mounted里即可

			let u = navigator.userAgent;
            let flag;
            let myFunction;
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if(isIOS){
                document.body.addEventListener('focusin', () => {  //软键盘弹起事件
                    flag=true;
                    clearTimeout(myFunction);
                })
                document.body.addEventListener('focusout', () => { //软键盘关闭事件
                    flag=false;
                    if(!flag){
                        myFunction = setTimeout(function(){  
                            window.scrollTo({top:0,left:0,behavior:"smooth"})//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
                            
                        },200);
                    }else{
                        return
                    }
                })
            }else{
                return
            }