一.问题如下

最近用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)中软键盘弹出,固定定位绝对定位元素位置发生错乱相关推荐

  1. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题 $(document).ready(function() {                                 va ...

  2. Android中软键盘弹出时关于布局的问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  3. Android中软键盘弹出可能遮挡布局

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  4. 解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后,页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开

    //解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...

  5. flutter APP中禁止软键盘弹出,监听硬键盘输入方法

    flutter App中禁止软键盘弹出,监听硬键盘输入的方法 之前的工作中遇到一个需求,想点击输入框后不弹出软键盘,使用设备硬键盘输入,解决方法:设置输入框只读并且显示光标,然后配置键盘监听就可以了. ...

  6. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    h5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...

  7. 简单可用 Android 安卓软键盘弹出、隐藏监听方法回调

    工具类 import android.app.Activity import android.graphics.Rect import android.view.ViewTreeObservercla ...

  8. android 软件盘弹回去的最好体验,Android 软键盘弹出 日常填坑

    开发输入框的开发者都会遇到一个问题,那就是在登录界面时,当你点击输入框时,下边的按钮有时会被输入框挡住,这个不利于用户的体验,所以很多人希望软键盘弹出时,也能把按钮挤上去.这样的交互更人性化,做得合理 ...

  9. 软键盘弹出时popwindow_【示例】解决软键盘弹出时底部元素上浮的问题

    问题描述 在html5plus环境下,当html中存在固定在底部的元素时,此时弹出软键盘的话,底部的元素也会被弹上来. 出现这种情况时,看起来页面布局好像乱掉了,这样给用户的体验不太理想. 问题分析 ...

最新文章

  1. buu Rabbit
  2. 《软件需求分析(第二版)》第 16 章——需求链中的联系链 重点部分总结
  3. startService和onBinderService混合开发音乐播放器
  4. Java Web的分页工具类
  5. 人工智能你必须掌握的32个算法(二)归并排序算法
  6. 智能环境监测产品浪涌防护整改之TVS管
  7. 国内外银行核心系统之间的差异
  8. RabbitMQ,手动ACK情况下,消费消息的时候出现异常,如何手动ACK或NACK
  9. java农历万年历课程设计_Java编写多功能万年历程序的实例分享
  10. 长整数转化成16进制字符串
  11. chrome导入\导出登录密码
  12. laravel结合easyWeChat的使用
  13. TCP的滑动窗口与拥塞窗口
  14. RFID中的s50卡
  15. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验二十五:SDHC模块
  16. 隐私保护与隐私计算研讨会 | 余维仁:大数据时代下需要各界更新对个人隐私保护的固有认识
  17. 诋毁PlusFo究竟有何意义?
  18. 2021南京航天航空大学820自动控制原理参考答案
  19. Android webView 实现阻尼回弹效果
  20. SOA 和微服务有何区别?

热门文章

  1. OpenCV DNN模块黑白图片上色修复
  2. mybatis+servlet
  3. 关于使用IE6下载文件时提示windows无法打开的问题
  4. Python-四分位数计算
  5. 太赫兹通信芯片关键技术与系统发展浅析
  6. 【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲
  7. ASO优化之如何维护关键词群
  8. 全加器和行波进位加法器的延迟时间
  9. 2023美赛常见问题解答
  10. JDBCUtils工具库