苹果系统H5页面软键盘弹出造成点击事件失效

最新推荐文章于 2025-06-30 11:46:50 发布

就这样敲

最新推荐文章于 2025-06-30 11:46:50 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript ios

原文链接：https://www.cnblogs.com/zzghk/p/11271804.html

js 专栏收录该内容

2 篇文章

订阅专栏

本文描述了在苹果系统中，H5页面软键盘弹出时可能导致点击事件失效的问题，尤其是在iPhoneX、6和7等部分型号上。文章提供了两种处理方法，包括使用`blur`事件清空滚动位置和针对iOS终端的事件监听器来确保页面在软键盘收起时正确定位。

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

苹果系统H5页面软键盘弹出造成点击事件失效

问题描述：苹果系统，软键盘弹出，键盘再收起时，原虚拟键盘位点击事件无效。

排查过程：只有iphonex、iphone6，ihpone7等部分机型会出现该问题；

原因：在IOS下，点击页面中的input时，弹出软键盘时，如果input比较靠下，整个页面会上移，document.body.scrollOffset会由0变成大于0。软键盘消失后，页面会下移。但是document.body.scrollOffset并不会变成0，所以这时候触控不准；

$('textarea,input').on('blur', function (event) {
           document.body.scrollTop = 0;
   });
　
或者<br>$("input").blur(function() {
console.log("失去焦点");
window.scrollTo(0, 0);
});

==新的处理办法
//ios 软键盘处理，页面错位恢复问题

	var isReset = true;
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    function scrollTO() {
        //软键盘收起的事件处理
        isReset = true;
        setTimeout(function () {
            //当焦点在弹出层的输入框之间切换时先不归位
            if (isReset) {
                window.scrollTo(0, 0);//失焦后强制让页面归位
            }
        }, 300);
    }
 	if (isiOS) {//ios
      document.body.addEventListener('focusin', function () {
      //软键盘弹出的事件处理
       isReset = false;
    });
   	 document.body.addEventListener('focusout', scrollTO);
	}
 
	 document.body.removeEventListener('focusout', scrollTO);