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

最新推荐文章于 2024-05-27 16:28:47 发布
最新推荐文章于 2024-05-27 16:28:47 发布
阅读量3.3k 收藏 10
点赞数
文章标签： uniapp vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoluochaotian/article/details/131975841
版权

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

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

 

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

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

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

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

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

 下面看最后的演示

键盘弹起时界面不变形

神奇宝贝超超
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
h5页面底部input调出软键盘后，页面整体上移解决方案安卓
01-04 3554
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed...
h5 如何解决键盘弹起时，固定元素向上浮动的问题
qq_35165469的博客
08-13 2565
我的是安卓手机的微信公众号存在这个问题，当input获得焦点，键盘弹起时，固定元素失效元素会向上浮动， 为了区分安卓系统和IOS系统，我先读取设备的系统； var u = navigator.userAgent; //Android终端 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //iO...
h5键盘弹出收起时引起的页面变化
weixin_46087056的博客
04-25 617
键盘弹出时会导致窗口发生变化，置于底部的操作项会被顶上来，所以在键盘弹出的时候处理一下页面节点
h5 ios键盘弹出 布局上移
最新发布
qq_38920348的博客
05-27 359
请注意，这个示例是一个简化的解决方案，实际应用时可能需要根据具体的页面布局和需求进行调整。此外，键盘的高度估算（15%）可能也需要进行相应的调整，以更精确地适应不同的设备和键盘情况。在iOS设备上，当HTML表单输入框获得焦点时，原生键盘会弹出，这可能导致页面布局发生变化，特别是当键盘比较高时，页面内容可能被上移，以便让输入框可见。在键盘弹出时，通过JavaScript检测视口的高度，如果发现有明显的变化，可以通过CSS或JavaScript调整布局，以确保输入框始终可见。
移动端弹出键盘， 导致页面上移
weixin_41060844的博客
12-02 3742
昨天在页面开发H5过程中，发现输入框获取焦点输入法弹窗弹起，导致页面上移，输入法隐藏时页面没有收回。 原先的写法： body: height100vh; 修改后的写法 body在style不设置高度，交由js设置动态高度 删除 body: height100vh; // 首先设置一个变量 data() { return { screenHeight: '' } }, mounted(){ this.screenHeight = uni.getSystemInfoSync().windowHei
uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题
Sissi的个人笔记
12-17 1万+
具体问题 我是一个全屏的H5页面，高度用的是100vh，全屏 = 页面。 input输入框固定在底部，input聚焦时软键盘弹出，安卓时页面被压缩，变成了全屏 = 页面 + 软键盘，页面就变形了。 ios是整个页面会被往上顶，发生滚动。 解决办法 第一步：解决页面被压缩、往上顶问题 测试发现，当iput框位置高于软键盘弹出的位置时页面不会被挤压、往上顶，而input聚焦的操作先于软键盘弹出，所以当input聚焦时使input的位置高于软键盘弹出位置。 这时如果不做任何操作的话，input框的位置是有问题的，
ListView点击，长按，手势item横向滑动，显示被顶部覆盖的底层
09-03
微信5.0的取消了item长按，让我最开始不知道怎么删除信息了，好忧郁。搞了半天才发现item可以滑动... 这个Demo是git上的SwipeListView一个开源项目。具体实现了item点击向右滑动，显示底层的布局。支持各种操作，手势，点击，长按都可以使item滑开进而显示底部所要显示的控件。也是自己一点点看代码才改成现在这个版本，顺便把ULI加进去了，那个包比较简单。大家可以根据自己的需求修改代码，没有过多的改UI，功能效果还是可以看的，放心下载吧各位骚年
H5 防止安卓手机软键盘弹出挤压页面导致变形的方法
weixin_48596030的博客
08-11 3147
安卓中，因为软键盘会改变页面的高度（将页面顶上来）
解决uni-app 输入框，键盘弹起时页面整体上移问题
热门推荐
weixin_42125732的博客
10-19 2万+
1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize 2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan， 在pages.json里该页面注册的style里加上这段代码就能完美解决了 "style": { //手机软键盘升起不让其将页面头部上推 "app-
关于Uni/Vue开发的H5点击输入框，键盘弹出，会将底部顶起来的问题解决
qq_38774121的博客
11-19 3628
Uni/Vue开发的H5点击输入框，键盘弹出，会将底部顶起来
IOS开发中键盘输入屏幕上移的解决方法
09-01
// 当用户开始编辑时，键盘弹出，屏幕上移 - (void)textFieldDidBeginEditing:(UITextField *)textField { // 键盘高度通常为216像素，但也可以通过UIKeyboardFrameEndUserInfoKey获取动态高度 CGFloat ...
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
1.发现问题：当前页面中box为flex布局，内容为上下固定高，中间自适应（中间区域内容过多会出现滚动条，input框在wrapper的底部），input获取焦点，手机键盘弹出，input未上移到可视区内，怀疑是flex布局导致。...
手机软键盘弹出时影响布局的解决方法
11-29
移动端软键盘弹出时影响布局该如何解决 1）前段时间作的移动端页面，因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时，布局没有大影响。 当输入框可能被软键盘压到时，在一部分安卓下...
监听软键盘的弹出与收起（近乎完美的）
04-24
还可以创建一个BroadcastReceiver来监听系统的输入设备状态变化，当键盘弹出或收起时，系统会发送相应的广播。不过，这种方法需要声明权限，并且在Android 8.0及以上版本可能会失效。 ```java public class ...
弹出键盘,监听键盘高度
04-26
本代码着重解决的问题是键盘弹出时，监听键盘的高度变化，以便动态调整UI布局。这通常涉及到苹果的UIKit框架，特别是UITextField或UITextView的使用，因为它们是触发键盘显示的关键控件。以下是一些相关知识点： 1....
关于移动端软键盘弹出-页面上移
weixin_44204144的博客
08-19 4097
关于移动端软键盘弹出-页面上移 测试提了一个bug，说的是除了iphone6 7 7puls不兼容收不到验证码，其他Android和ios都是ok的，才发现原来是软键盘弹出以后导致页面上移导致页面塌陷了。在iphone7测试的时候，只要软键盘一弹出，输完电话号码以后，关闭软键盘，怎么点击获取验证码都直接出了一个注册按钮的点击事件，话不多说，直接上图。 只要我输完电话号码，关闭软键盘，随便我怎么点击都是直接弹出“请输入验证码”，这个是弹窗是注册按钮的点击事件，都是因为页面上移导致页面塌陷了。我还在纳闷为什么
H5解决软键盘弹起导致遮挡输入框问题
only_neo的博客
03-26 3377
var clientHeight = $(window).height()// 初始化屏幕高度 var isFocus = false// 是否有input标签被选中，false没有， true有 var focusDom = null// 当前选中的input标签 $(document).on('f...
h5键盘弹起底部菜单(按钮)被顶起-vue自定义指令解决
m0_37824255的博客
09-20 2724
开发H5中测试过程中发现在安卓手机上，input/textarea 获取焦点 软键盘弹出 会让absolute/fixed或者使用flex局部 固定在底部的元素(固定底部栏)顶起来问题；在搜索后发现安卓上在键盘弹起的时候浏览器。我这边我是使用了input/textarea 的focus/blur事件，及配合resize事件来设置固定底部栏。添加上之后 我们就会发现现在是可以符合我们的条件的，当键盘展示时隐藏底部固定栏，收起键盘时展示底部固定栏。自定义指令详情 请参考官方文档。
vue3 h5 监听键盘的弹起与收起
04-18
对于vue3 h5监听键盘的弹起与收起，我们可以使用window对象的resize事件和document对象的focusin和focusout事件来实现。具体方法可以参考以下代码： // 监听键盘弹起函数 function onKeyboardShow() { //...处理键盘弹起事件 } // 监听键盘收起函数 function onKeyboardHide() { //...处理键盘收起事件 } // 监听窗口大小改变事件 window.addEventListener('resize', () => { if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { if(document.body.scrollTop > 0) { // IOS系统自带输入法 onKeyboardShow(); } else { // 安卓系统自带输入法 onKeyboardHide(); } } else { onKeyboardHide(); } }); // 监听input和textarea获取焦点事件 document.addEventListener('focusin', () => { onKeyboardShow(); }); // 监听input和textarea失去焦点事件 document.addEventListener('focusout', () => { onKeyboardHide(); });

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值