Lorsque l'entrée H5 IOS est focalisée, la page entière est poussée vers le haut (vers le bas), mais la page n'est pas déplacée vers le bas (vers le haut) lorsque le clavier est fermé, et la page est agrandie

réagir dans app.tsx / vue dans app.vue ou 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));

Coopérez avec Input, select, textArea pour perdre le focus sur Blur

//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 obtiennent le focus pour zoomer et dézoomer

  <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"

 

Je suppose que tu aimes

Origine blog.csdn.net/weixin_46600931/article/details/129408392
conseillé
Classement