uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下
最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图
二.解决方法
1.让其在输入框获取焦点时隐藏
百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去在让按钮显示出来,但是这样写每个输入框都得加两个得到焦点和失去焦点的事件.而且如果你把软键盘放下,按钮不会出来.所以这个方法pass掉.
网上的方法很多,但是都不是我想要的效果.
2.将 bottom 改成 top
最后我的方法是把 固定定位的bottom改成了top,因为用的rpx适配,所以如果用top:600rpx这种方法,可能显示不是很完美,所以我在onReady的时候获取屏幕的高度,在进行按钮高度的设置.代码如下:
<!-- 注册确认按钮--><button @click="submit" class="reg-btn" :style="{top:regLocation}" plain>确认</button>
//注册确定按钮样式
.reg-btn{display: flex;justify-content: center;align-items: center;width: 592rpx;height: 108rpx;background: #4747FB;border: none;border-radius: 58rpx;font-size: 32rpx;font-weight: 400;color: #FFFFFF;position: fixed;left: 50%;transform: translateX(-50%);
}
onReady() {try {// 根据屏幕高度设置 top 值this.regLocation = res.windowHeight - 118 + 'px' // 此处的 118 是我的按钮离底部的距离加上按钮的高度} catch (e) {// erroruni.$u.toast(e)}}
最后效果图如下:
此时软键盘弹起就不会把按钮往上挤了,而且定位也是我想要的位置
补充:
最近写项目发现,这种调用接口获取屏幕高度有点麻烦了.实际上我们可以直接设置top定位
position: absolute;width: 90%;top: calc(100% - 152rpx);
这样很好的解决了这个问题,而且代码也简单,就主要设置 calc 来控制距离底部的距离.
3.补充 app 的解决方法
https://uniapp.dcloud.io/component/input?id=input
这个方法是针对app的解决方法
"app-plus": {"softinputMode": "adjustPan"
}
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱相关推荐
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题 $(document).ready(function() { va ...
- Android中软键盘弹出时关于布局的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- Android中软键盘弹出可能遮挡布局
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- 解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后,页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
- flutter APP中禁止软键盘弹出,监听硬键盘输入方法
flutter App中禁止软键盘弹出,监听硬键盘输入的方法 之前的工作中遇到一个需求,想点击输入框后不弹出软键盘,使用设备硬键盘输入,解决方法:设置输入框只读并且显示光标,然后配置键盘监听就可以了. ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...
- 简单可用 Android 安卓软键盘弹出、隐藏监听方法回调
工具类 import android.app.Activity import android.graphics.Rect import android.view.ViewTreeObservercla ...
- android 软件盘弹回去的最好体验,Android 软键盘弹出 日常填坑
开发输入框的开发者都会遇到一个问题,那就是在登录界面时,当你点击输入框时,下边的按钮有时会被输入框挡住,这个不利于用户的体验,所以很多人希望软键盘弹出时,也能把按钮挤上去.这样的交互更人性化,做得合理 ...
- 软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题
问题描述 在html5plus环境下,当html中存在固定在底部的元素时,此时弹出软键盘的话,底部的元素也会被弹上来. 出现这种情况时,看起来页面布局好像乱掉了,这样给用户的体验不太理想. 问题分析 ...
最新文章
- buu Rabbit
- 《软件需求分析(第二版)》第 16 章——需求链中的联系链 重点部分总结
- startService和onBinderService混合开发音乐播放器
- Java Web的分页工具类
- 人工智能你必须掌握的32个算法(二)归并排序算法
- 智能环境监测产品浪涌防护整改之TVS管
- 国内外银行核心系统之间的差异
- RabbitMQ,手动ACK情况下,消费消息的时候出现异常,如何手动ACK或NACK
- java农历万年历课程设计_Java编写多功能万年历程序的实例分享
- 长整数转化成16进制字符串
- chrome导入\导出登录密码
- laravel结合easyWeChat的使用
- TCP的滑动窗口与拥塞窗口
- RFID中的s50卡
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十五:SDHC模块
- 隐私保护与隐私计算研讨会 | 余维仁:大数据时代下需要各界更新对个人隐私保护的固有认识
- 诋毁PlusFo究竟有何意义?
- 2021南京航天航空大学820自动控制原理参考答案
- Android webView 实现阻尼回弹效果
- SOA 和微服务有何区别?