解决 iOS 端输入框聚焦时页面上移问题

一、前言

iOS Safari 浏览器中,输入框(input/textarea)聚焦时,页面常会莫名上移且失焦后不回落,影响用户体验。通过监听输入框焦点事件,可强制页面回正

二、代码注释详解

javascript 复制代码
// 解决iOS输入框聚焦后页面上移问题
const inputs = document.querySelectorAll("input, textarea");
inputs.forEach((input) => {
  // 失焦时强制页面滚动到顶部(或指定位置)
  input.addEventListener("blur", () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth", // 平滑滚动,可选
    });
  });

  // 聚焦时也可微调位置(根据需求可选)
  input.addEventListener("focus", () => {
    setTimeout(() => {
      input.scrollIntoViewIfNeeded(false); // false表示不居中,避免页面偏移
    }, 100);
  });
});
相关推荐
方也_arkling4 分钟前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐7 分钟前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_1777673712 分钟前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_1777673718 分钟前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
web打印社区21 分钟前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO40 分钟前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
烬头88211 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
Amumu121381 小时前
Vuex介绍
前端·javascript·vue.js
We་ct1 小时前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
2601_949809591 小时前
flutter_for_openharmony家庭相册app实战+相册详情实现
javascript·flutter·ajax