Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

  • 工程能力

  • 应用基础

  • 专业领域

    • 服务端

    • 跨端技术

      • H5

        • H5导航栏
        • H5常见问题和解决方案
          • 软键盘显示搜索
          • H5软键盘顶起问题
          • 滚动穿透问题
        • bridge设计
        • fastclick 原理剖析与踩坑记录
        • iOS 上拉下拉 webview 出现空白的问题
        • 移动端响应式布局
        • 移动端强制横竖屏
        • 机型分级方案总结
      • Hybrid 基建需要做哪些?
      • PWA

      • 高性能动态化跨端方案设计
      • 端能力

    • Web IDE

    • 中后台

    • 动效渲染

    • 可视化

    • 埋点监控

    • 多媒体

    • 桌面技术

    • 游戏互动

    • 编辑器

    • 虚拟化与容器化

    • 设计系统

  • 业务场景

  • 大前端
  • 专业领域
  • 跨端技术
  • H5
gahing
2023-08-17
目录

H5常见问题和解决方案草稿

# 软键盘显示搜索

      <form action="#">
        <Input
          type="search"
          autoFocus={true}
          prefixIcon="search"
          className="search-input"
          placeholder="可搜索图文标题关键词或作者名"
        />
      </form>
1
2
3
4
5
6
7
8
9

input type 为 search

ios 需要用 form 包裹

~监听 keyPress 事件, keycode 13 即按下搜索~

监听这个事件没用, keycode 各个键盘不一致

需要监听 form 的 submit 的事件

注意提交默认会产生页面刷新,需要禁用默认事件

e.preventDefault();
1

# H5软键盘顶起问题

历史方案:fixed 布局冻结 + 顶起

目前浏览器新增了虚拟键盘 api,提供了自行控制展现的能力,但需要关注下兼容性

# 滚动穿透问题

开源方案:https://github.com/tuateam/tua-body-scroll-lock/

  • iOS 主要是利用对 touchmove 进行 preventDefault,而后模拟滚动。
  • Android 主要是对 html 设置 overflow、对 body 设置 fixed 等样式限制。
编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
H5导航栏
bridge设计

← H5导航栏 bridge设计→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式