解决 H5 IOS input 聚焦时，页面整个被推上（下）去了，键盘收起页面未下（上）移 BUG、页面放大

最新推荐文章于 2023-11-01 22:29:12 发布

Jim-zf

最新推荐文章于 2023-11-01 22:29:12 发布

阅读量2.3k

点赞数

文章标签： ios bug 前端 javascript

本文链接：https://blog.csdn.net/weixin_46600931/article/details/129408392

版权

react 在app.tsx /vue 在app.vue或main.js

window.onload = function () {
  /iphone|ipod|ipad/i.test(navigator.appVersion) &&
    document.addEventListener(
      'blur',
      (event) => {
        // 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
        // input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
        if (
          document.documentElement.offsetHeight <= document.documentElement.clientHeight &&
          ['input', 'textarea'].includes(event.target.localName)
        ) {
          document.body.scrollIntoView(); // 回顶部
        }
      },
      true,
    );
};
window.scrollTo(0, 0);
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

配合Input、select、textArea失去焦点onBlur

//publicFC 公共方法文件
export const onBlurInput = () => {
    console.log('失去焦点')
    let u = navigator.userAgent,
      app = navigator.appVersion;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIOS) {
      setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 200);
    }
  };
//----------------------------------
import { onBlurInput } from '@/utils/publicFC';
//例如select
    <Select
      onBlur={onBlurInput}
    />
//例如input
    <Input
      onBlur={onBlurInput}
    />

Input、select、textArea获取焦点放大放大问题

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"