H5界面键盘弹起，整个界面上移

最新推荐文章于 2024-05-27 16:28:47 发布
原创 最新推荐文章于 2024-05-27 16:28:47 发布
· 5k 阅读 · 17 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uniapp #vue #css

说下基本的问题，就是点击选择门店，会从下面弹出一个弹框，出现门店列表，然后列表上方会有一个搜索框，搜索门店，当点击搜索框时会弹起键盘，导致整个弹框上移，可能会导致搜索框跳出整个界面，如下图所示，如果字体或整个界面过大，搜索框就会跳出可视区域

 具体解决方法，如果是App环境的话直接可以在uniapp中的pages.js页面配置界面设置一个属性即可如下图所示，但是我这个是H5环境是直接挂在企业微信上面的，这个属性就不管用。

 

 所以只能另辟蹊径，找了其他方法，就是当键盘弹起时，设置这个弹框的位置向下移动，移动的高度为键盘的高度即可

在初始化时获取整个界面的可视区域，我这是在初始化查询的时候设置的高度，将这个值存起来，下面要用

然后获取键盘弹出时的高度，也存入一个值，这个方法可在mounted中调用，键盘弹起时这个方法会自动调用

然后再监听键盘的高度，用最开始的获取的可视高度-键盘弹起时的可视高度，就获取到了键盘的高度，

 将最后获取到的值赋给键盘设置样式即可，这样子键盘弹起和收起时高度也不会变化了

 下面看最后的演示

键盘弹起时界面不变形

uniapp微信小程序 - 解决输入框input软键盘弹起时页面整体上移问题，页面上推导致顶部出现元素遮挡问题，uniapp软键盘导致页面上移头部内容被错位遮住错乱，让页面头固定在顶部不动不会受影响！
高级前端工程师
04-29 1万+
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题，当键盘弹起时，会导致页面整体上移，页面头固定在顶部不动，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，uni-app输入框，输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见，小程序底部input输入框，input组件弹起系统键盘时，键盘会顶住页面导致页面会上移，当键盘弹起时整个页面被挤压,导致元素上移或被覆盖，输入框能自动抬起至键盘上方,顶部导航栏保持固定,不被顶上去，如何解决这个问题，动态高度
ios html5键盘弹出视图上移,IOS 实现键盘弹出视图上移功能
weixin_29382667的博客
06-09 765
实现随着键盘弹出，响应的视图也随之上移有时候你可能会遇到这样一个情况，如下图 这样弹出来的键盘就遮挡住了文本框，导致看不到文本框，也就看不到输入了什么解决这个问题有两种方法一、把文本框调高点，这样键盘就不会遮挡文本框了，但是有时候布局不允许这么做，那么显而易见这种方法也就不太可取了，二、当键盘要弹出的时候把整个视图往上移动，这样文本框也就随着往上移动。显然这种方法更可取，下面我们就来实现这个方...
【快应用】H5网页弹出软键盘后页面没有上移
华为开发者联盟
01-05 1167
使用快应用web组件加载某H5网页时，比如帐号登录、帐号注册等带有输入框的页面，当输入框获取焦点，弹出的软键盘挡住了H5网页的部分内容。上述template代码中把web作为根节点，软键盘呼出时，没有触发快应用引擎布局的重新计算，导致页面没有上移。2、另外，需要确认manifest.json文件中windowSoftInputMode的值。1、在web组件外套一层div，将div作为根节点。如果不为adjustPan，也会导致页面没有上移。1、该问题和web组件的页面布局有关系。
h5 ios键盘弹出 布局上移
qq_38920348的博客
05-27 1734
请注意，这个示例是一个简化的解决方案，实际应用时可能需要根据具体的页面布局和需求进行调整。此外，键盘的高度估算（15%）可能也需要进行相应的调整，以更精确地适应不同的设备和键盘情况。在iOS设备上，当HTML表单输入框获得焦点时，原生键盘会弹出，这可能导致页面布局发生变化，特别是当键盘比较高时，页面内容可能被上移，以便让输入框可见。在键盘弹出时，通过JavaScript检测视口的高度，如果发现有明显的变化，可以通过CSS或JavaScript调整布局，以确保输入框始终可见。
uni-app H5键盘弹出整体页面上移
weixin_36756837的博客
12-04 5612
将屏幕高度视为视口高度 uni-app开发手机端输入框调出键盘，键盘弹出将页面整个顶上去 原因分析： 移动端h5页面在软键盘弹出 后，body的高度被压缩了，动态绑定body的高度即可解决，就导致原本高度100%的背景图被顶上去一截 解决方案： this.screenHeight = uni.getSystemInfoSync().windowHeight + 'px'; // 把页面高度定成视口高度 ...
h5键盘弹出收起时引起的页面变化
weixin_46087056的博客
04-25 1098
键盘弹出时会导致窗口发生变化，置于底部的操作项会被顶上来，所以在键盘弹出的时候处理一下页面节点
h5 键盘弹出 布局上移_如何设置讯飞输入法键盘布局 上划打出数字和符号？
weixin_35731493的博客
12-12 2166
为什么有的讯飞输入法用户可以直接在键盘上划输入数字和符号，而你却需要切换到对应的数字键盘和符号键盘输入？难道用的不是同一个讯飞输入法吗？其实差距仅在于键盘布局不同。由于每个人的打字习惯不同，所以对输入法的要求自然也不同，统一的键盘布局势必不能满足个性化需求，所以讯飞输入法提供了六款键盘布局，总有一款适合你。讯飞输入法的六款键盘布局分别是：讯飞布局、默认布局、搜狗布局、双键布局、怀旧布局和点划布局。...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
在Android平台上，开发H5页面时常遇到一个问题：当用户点击位于页面底部或下方的输入框时，软键盘弹出会遮挡输入框，导致用户体验不佳。这个问题主要涉及到H5页面的布局、Android设备的交互特性以及浏览器的适配。...
IOS开发中键盘输入屏幕上移的解决方法
09-01
// 当用户开始编辑时，键盘弹出，屏幕上移 - (void)textFieldDidBeginEditing:(UITextField *)textField { // 键盘高度通常为216像素，但也可以通过UIKeyboardFrameEndUserInfoKey获取动态高度 CGFloat ...
可能这些是你想要的H5软键盘兼容方案(小结)
12-14
在iOS上，当输入框获得焦点，键盘弹起时，页面不会改变其高度，而是整体向上滚动。而键盘收起时，页面并不会自动恢复到原来的滚动位置。在Android系统中，软键盘弹起会导致页面高度减少，相当于页面被压缩。而键盘...
h5键盘弹起底部菜单(按钮)被顶起-vue自定义指令解决
m0_37824255的博客
09-20 3221
开发H5中测试过程中发现在安卓手机上，input/textarea 获取焦点 软键盘弹出 会让absolute/fixed或者使用flex局部 固定在底部的元素(固定底部栏)顶起来问题；在搜索后发现安卓上在键盘弹起的时候浏览器。我这边我是使用了input/textarea 的focus/blur事件，及配合resize事件来设置固定底部栏。添加上之后 我们就会发现现在是可以符合我们的条件的，当键盘展示时隐藏底部固定栏，收起键盘时展示底部固定栏。自定义指令详情 请参考官方文档。
html5手机键盘弹出收起的处理
11-21
前言：前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题 在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。 键盘弹出 IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度
uniapp iOS键盘弹出,手机浏览器中h5页面整体上移问题
sinat_41657240的博客
07-07 2976
最近做了一个项目，要求在移动端的浏览器中打开我们的系统，进行数据操纵，使用uniapp+vue 为整体框架 问题：登陆页面底部logo使用flexd 布局方式，在android打开么没有提，但是在iOS 10 中键盘弹出,手机浏览器中h5页面整体上移，百度了一下，可以看一下这篇文章 https://www.jianshu.com/p/f5253b3ab100 主要的原因是应为部分ios系统不支持window.resize ...
uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题
热门推荐
Sissi的个人笔记
12-17 1万+
具体问题 我是一个全屏的H5页面，高度用的是100vh，全屏 = 页面。 input输入框固定在底部，input聚焦时软键盘弹出，安卓时页面被压缩，变成了全屏 = 页面 + 软键盘，页面就变形了。 ios是整个页面会被往上顶，发生滚动。 解决办法 第一步：解决页面被压缩、往上顶问题 测试发现，当iput框位置高于软键盘弹出的位置时页面不会被挤压、往上顶，而input聚焦的操作先于软键盘弹出，所以当input聚焦时使input的位置高于软键盘弹出位置。 这时如果不做任何操作的话，input框的位置是有问题的，
h5 键盘弹出 布局上移_告别下垂，不必等风来！哈弗H5加装程控水冷式中冷器
weixin_34887221的博客
12-07 904
原厂中冷器一直是H5一个不小的短板。首先，“等风来”的传统风冷散热方式，在高温高负荷工况下的越野驾驶中，特别是遇到大长坡路面，没有迎面风吹来，散热系统就无法正常工作，导致进气温度过高，严重影响发动机正常工况。再次，下垂的布局严重影响接近角，频频挨撞。同时因为离地太低，中冷器经常性的泡在泥坑里，污泥河沙吸附表面后导致散热面堵塞，散热完全失效。早前有在论坛里看到过所谓的上移方案。看越来只是简单的加个支...
彻底解决H5软键盘弹起遮挡输入框的问题
yiguoxiaohai的博客
03-08 7184
H5开发过程中，软键盘弹起有时会出现遮挡Input输入框的问题，下面来看看解决方法。
h5页面手机键盘弹起布局混乱的解决方法
NY1007的博客
07-20 1172
showFooter控制input下面的页面的显示与隐藏。
解决移动端H5页面点击输入框弹出键盘时将底部导航栏挤至上面
zhazhashuai1999的博客
08-12 3368
1.将导航栏position改为static或者relative position: relative | static; 2.如果不方便设置导航栏定位方式,可以监听浏览器输入框聚焦事件. 点击输入框 --> 触发浏览器focusin事件 --> 隐藏底部导航栏 ( --> 弹出键盘) --> 输入完成 --> 触发浏览器focusout事件 (--> 收起键盘) --> 重新渲染导航栏 document.body.addEventListene...
关于Uni/Vue开发的H5点击输入框，键盘弹出，会将底部顶起来的问题解决
qq_38774121的博客
11-19 3821
Uni/Vue开发的H5点击输入框，键盘弹出，会将底部顶起来
Vue3 uniapp 监听键盘弹起的高度
最新发布
04-23
### Vue3 和 UniApp 中监听键盘弹起高度的解决方案 在 Vue3 和 UniApp 的开发环境中，可以采用多种方法来监听软键盘的高度变化并处理相应的界面调整问题。以下是具体的实现方式： #### 方法一：使用 `@/utils/keyboardHeight` 工具类 如果项目中有现成工具类用于监听键盘高度的变化，则可以直接引入该模块进行操作[^1]。 ```javascript import keyboardListener from "@/utils/keyboardHeight"; // 添加键盘高度变化监听器 keyboardListener.onKeyboardHeightChange(({ height, extra }) => { console.log("键盘高度：", height); console.log("额外高度（iOS）：", extra); // 可在此处更新页面布局逻辑 }); // 当组件销毁时移除监听器 onUnmounted(() => { keyboardListener.offKeyboardHeightChange(); }); ``` 此方法适用于已有封装好的工具库场景，能够快速集成到现有项目中。 --- #### 方法二：利用原生 API 实现键盘高度监听 对于未提供专用工具的情况，可借助 `Window.visualViewport` 或其他事件机制手动捕获软键盘触发的行为[^2]。 ##### H5 端实现思路 通过监听页面可视区域 (`visualViewport`) 的尺寸变化检测软键盘弹出与否。 ```javascript let initialHeight = window.innerHeight; function onResize() { const currentHeight = window.innerHeight; const keyboardHeight = initialHeight - currentHeight; if (keyboardHeight > 0) { console.log(`键盘已弹起，高度为 ${keyboardHeight}px`); } else { console.log("键盘已收起"); } } window.addEventListener('resize', onResize); // 组件卸载时清理事件监听 onUnmounted(() => { window.removeEventListener('resize', onResize); }); ``` 这种方法依赖于浏览器对 `resize` 事件的支持程度，在部分老旧设备上可能需要额外适配。 --- #### 方法三：UniApp 提供的内置 API 针对移动端应用开发，推荐优先考虑 UniApp 自带功能完成需求。例如可通过 `onKeyboardHeightChange` 生命周期钩子获取动态数据[^2]。 ```javascript export default { data() { return { keyboardHeight: 0, }; }, methods: { handleKeyboardChange(e) { this.keyboardHeight = e.height || 0; console.log(`当前键盘高度为 ${this.keyboardHeight} px`); }, }, onLoad() { uni.onKeyboardHeightChange(this.handleKeyboardChange); }, onUnload() { uni.offKeyboardHeightChange(this.handleKeyboardChange); }, }; ``` 以上代码片段展示了如何绑定全局范围内的键盘状态改变回调函数，并及时同步至内部变量存储以便后续调用。 --- #### 封装与复用建议 为了提高代码质量以及降低维护成本，强烈建议将上述任意一种技术打包成为独立服务层或者插件形式发布出去共享给团队成员重复利用。 比如创建名为 `useKeyboardHeight.js` 的组合式 API 文件如下所示： ```javascript import { ref, onMounted, onUnmounted } from 'vue'; export function useKeyboardHeight() { const keyboardHeight = ref(0); const updateHeight = ({ height }) => { keyboardHeight.value = height; }; onMounted(() => { uni.onKeyboardHeightChange(updateHeight); }); onUnmounted(() => { uni.offKeyboardHeightChange(updateHeight); }); return { keyboardHeight }; } ``` 随后只需简单导入即可享受便捷体验： ```javascript <script setup> import { useKeyboardHeight } from '@/composables/useKeyboardHeight'; const { keyboardHeight } = useKeyboardHeight(); console.log(keyboardHeight); // 动态反映实时数值 </script> ``` --- ### 注意事项 - 不同平台间可能存在细微差异，请务必测试覆盖 Android/iOS/H5 多种环境。 - 若发现某些机型无法正常工作，尝试查阅官方文档寻找替代方案或联系技术支持寻求帮助。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值