ios12以后微信键盘回收问题

最新推荐文章于 2025-04-27 18:08:48 发布

Sueeybn

最新推荐文章于 2025-04-27 18:08:48 发布

阅读量303

点赞数

分类专栏：开发问题文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_40860158/article/details/104567408

版权

开发问题专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个解决iOS12及以后版本中微信内置浏览器键盘回收后页面出现空白的问题的方法。通过添加特定的JavaScript代码，可以实现软键盘收起后页面的自动调整，确保用户体验不受影响。

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

ios12以后微信内置浏览器键盘回收后页面键盘位置会空白，加入下面这段代码就可以解决问题。

//ios微信键盘回收问题
    document.body.addEventListener('focusout', () => {
     //软键盘收起的事件处理
    let ua = window.navigator.userAgent;
    let app = window.navigator.appVersion;
    //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
    if(!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        //$alert('ios端');
	var currentPosition, timer;
	var speed = 1;
	timer = setInterval(function() {
	    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
	    currentPosition -= speed;
	    window.scrollTo(0, currentPosition); //页面向上滚动
	    currentPosition += speed;
	    window.scrollTo(0, currentPosition); //页面向下滚动
	    clearInterval(timer);
	}, 100);
    } else if(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        //$alert('android端');
    }
 })