H5 ios软键盘弹起遮挡输入框

devtools/2024/12/23 23:58:00/

在使用 Vue 3 和 TypeScript 开发 H5 页面时,输入框固定在底部,遇到 iOS 软键盘弹起遮挡输入框的问题。以下为几种解决方案:

1. 使用 viewport 元素调整页面视图

iOS 在弹出软键盘时,可能会导致页面内容被遮挡。通过调整 meta 标签中的 viewport 来确保页面可以适应不同的屏幕尺寸和键盘显示。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • maximum-scale=1.0 可以防止页面缩放。
  • user-scalable=no 禁用缩放功能。
  • 结果:不管使,但要设置

2. 监听键盘事件

在 iOS 上,当软键盘弹起时,可以通过监听 focus 和 blur 事件来控制页面布局。通过监测键盘弹出时的事件,动态调整输入框的位置。

<template><div ref="inputElement" class="container"><input type="text" @focus="handleFocus" @blur="handleBlur" /></div>
</template><script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';const inputElement = ref<HTMLInputElement | null>(null);const handleFocus = () => {setTimeout(() => {// 使输入框滚动到视口可见区域if (inputElement.value) {inputElement.value.scrollIntoView({behavior: 'smooth',block: 'center',});}}, 300); // 延迟让键盘弹起后滚动
};const handleBlur = () => {// 软键盘收回时可以做额外处理setTimeout(() => {})
};onMounted(() => {
document.body.addEventListener('focusin',  handleFocus)
document.body.addEventListener('blur', handleBlur);
});
</script><style lang="scss" scoped>
.container{position: fixed;bottom: 0;left: 0;width: 100%;
}
</style>
  • scrollIntoView 方法可以将输入框滚动到视口的可视区域。
  • 使用 setTimeout 延迟调用,确保软键盘弹起后再执行滚动。
  • 注意该篇针对的是 container 的 position 为 fixed 的情况
  • 结果scrollIntoView 不生效,pass,思路可取,将 scrollIntoView 换成 scrollTo 即可生效
let scrollHeight = 0const handleFocus = () => {setTimeout(() => {// 使输入框滚动到视口可见区域scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0// window.innerHeight:当前窗口的高度(含有键盘高度)// window.visualViewport.height:可视区域的高度(不含有软键盘高度)// window.innerHeight - window.visualViewport.height 即为软键盘高度window.scrollTo({top: scrollHeight + window.innerHeight - window.visualViewport.height,behavior: 'smooth'})}, 300); // 延迟让键盘弹起后滚动
};const handleBlur = () => {// 软键盘收回时回归原位置setTimeout(() => {window.scrollTo({ top: scrollHeight, left: 0, behavior: 'smooth' })}, 300)
};
  • visualViewport API 的兼容性:visualViewport API 在大多数现代浏览器中都支持,但需要确认你的目标浏览器支持这一特性,尤其是在一些较旧的版本或某些设备中。

3. 使用 keyboardAvoidingView (适用于 React Native)

虽然 keyboardAvoidingView 是 React Native 中的一个功能,但可以借鉴其思想,通过调整页面布局、使用 padding-bottom 或 margin-bottom 来适应软键盘的高度。

<template><div class="container"><input ref="inputElement" type="text" @focus="handleFocus" @blur="handleBlur" /></div>
</template><script setup lang="ts">
const inputElement = ref<HTMLInputElement | null>(null);const handleFocus = () => {document.body.style.paddingBottom = "200px";  // 适应软键盘的高度
};const handleBlur = () => {document.body.style.paddingBottom = "0";  // 收回软键盘时清除样式
};</script><style scoped>
.container {position: relative;/* 其他样式 */
}
</style>
  • 该方法没有实操过,理论上可行

http://www.ppmy.cn/devtools/144837.html

相关文章

【leetcode100】随机链表的复制

1、题目描述 ​ 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点…

【Leetcode 热题 100】105. 从前序与中序遍历序列构造二叉树

问题背景 给定两个整数数组 p r e o r d e r preorder preorder 和 i n o r d e r inorder inorder&#xff0c;其中 p r e o r d e r preorder preorder 是二叉树的 先序遍历&#xff0c; i n o r d e r inorder inorder 是同一棵树的 中序遍历&#xff0c;请构造二叉树并…

【JAVA】JAVA接口公共返回体ResponseData封装

一、JAVA接口公共返回体ResponseData封装&#xff0c;使用泛型的经典 例子 public class ResponseData<T> implements Serializable { /** * */ private static final long serialVersionUID 7098362967623367826L; /** * 响应状态码 */ …

基于 SSM 和 Vue 架构的新锐台球厅管理系统:创新设计引领高效实现

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…

贪心算法 greedy

文章目录 参考贪心算法[Leetcode455 分发饼干](https://leetcode.cn/problems/assign-cookies/description/)分析题解 [Leetcode135 分发糖果](https://leetcode.cn/problems/assign-cookies/description/)分析题解 leetcode435无重叠区间分析题解 参考 https://github.com/ch…

ElasticSearch08-分析器详解

零、文章目录 ElasticSearch08-分析器详解 1、分析器原理 Elasticsearch的分词器&#xff08;Analyzer&#xff09;是全文搜索的核心组件&#xff0c;它负责将文本转换为一系列单词&#xff08;term/token&#xff09;的过程&#xff0c;也叫分词。 &#xff08;1&#xff…

Windows系统如何配置远程音频

场景 RemoteFx 是 Windows RDP 桌面协议升级版&#xff0c;RDP 8.0起可以使用 RemoteFx 来使用 USB 重定向&#xff0c;将本地 USB 设备通过 RDP 的数据通道重定向到远程桌面&#xff0c;解决云端机器无法使用 USB 设备的问题。 客户端&#xff1a;Windows 10 操作系统 服务…

使用ElasticSearch实现全文检索

文章目录 全文检索任务描述技术难点任务目标实现过程1. java读取Json文件&#xff0c;并导入MySQL数据库中2. 利用Logstah完成MySQL到ES的数据同步3. 开始编写功能接口3.1 全文检索接口3.2 查询详情 4. 前端调用 全文检索 任务描述 在获取到数据之后如何在ES中进行数据建模&a…