移动端开发(底部按钮固定定位被软键盘顶上来问题)

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

#前端 #vue

本文记录了在移动端开发过程中遇到的一个问题，即在安卓设备上，当输入框聚焦时底部固定定位的按钮会被软键盘推上去。为了解决这个问题，通过在Vue项目的mounted生命周期中监听窗口resize事件，并根据窗口高度变化调整布局，实现了底部按钮在软键盘弹出时不被遮挡的解决方案。

这个是在我开发移动端的时候出现的一个问题，小小记录一下

问题： 当使用安卓手机在app端输入时，会发现底部固定定位的按钮被顶到软键盘上边去了，所以如何解决点击输入框进行输入时，底部按钮不被软键盘顶上来的这个问题呢？

代码附上:
1、首先在mounted生命周期中进行监听

mounted() {
   
   
	//首次进入的原始高度
	this.originalHeight = window.innerHeight;
	window.addEventListener('resize', this.
最低0.47元/天 解锁文章
Tmengxing
关注
Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
移动端登录界面，登录按钮会被虚拟键盘顶上去影响输入问题,登录按钮被隐藏bugfix
qq_44948905的博客
07-06 278
移动端弹出键盘遮盖输入问题
vue2移动端布局--固定定位的button被软键盘顶起
七号程序员的博客
04-23 1480
通过监听屏幕高度变化，决定固定定位元素是否显示，从而解决软键盘顶起底部固定元素的问题
fixed定位元素被安卓、ios键盘顶起的解决办法
qq_30872253的博客
03-01 5203
当我们在写H5页面时经常会有fixed固定位置的元素存在,例如下图左中的"作业帮一课APP下载框",当我们input输入的时候键盘会弹起并将fixed定位的下载框顶起,如下图右,ios和安卓部分机型都会有问题,现在针对两个系统总结出来两个解决方案: 安卓端: 在安卓端,当我们呼起键盘时,窗口的高度(document.documentElement.clientHeight)会改变,也就是会触发window.onresize事件,我们根据resize事件去做相关操作: 1.windows.resize事件被触
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题
泥鸽鸽的博客
11-20 2850
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？这个问题目前发现是部分安卓机上存在 解决思路有两个方案1：隐藏按钮 目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？ 这个问题目前发现是部分安卓机上存在 解决思路有两个
android软键盘把底部按钮顶上去,关于Android软键盘把布局顶上去的问题
weixin_39637386的博客
05-26 974
首先说下我的需求：布局最上面是一个bar,有左上角返回按钮和标题，bar下面是一个ScrollView，里面有各种TextView和EditText，点击下面的EditText时，不希望软键盘把bar给顶上去(看不见)。下面几点需要注意：1.在AndroidManifest中相应的activity配置android:windowSoftInputMode="adjustResize|stateHi...
移动端H5输入框调用手机软键盘，导致底部固定定位被顶起问题解决
u014165391的博客
08-18 6866
可以监听window对象的resize事件，判断当前屏幕高度是否小于原始屏幕高度，从而来对底部定位的元素控制其显示、隐藏；这个可以解决大部分手机的固定定位被顶起问题，但是对于部分iphone手机使用某些第三方输入法关闭事件可能监听不到。部分安卓和ihpone手机在调起手机软键盘时，会将固定定位元素顶起；当页面内容过多时，会导致内容被遮挡，无法查看，从而影响用户体验；......
精选资源
移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)
01-04
由于公司需求，需要做一个实时...然后自己就尝试了各种方法，什么定时器、绝对定位、固定定位、计算屏幕高度再定位等等，都没有作用，键盘出来后还是会遮挡住。最后只能上网查找答案，找了半天，终于找到了答案，这里要
移动端因软键盘的原因，固定在页面底部的按钮被弹起解决方案
kuke_kuke的博客
01-17 8578
问题描述：移动端，当需要输入内容时，软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起，如图： 解决思路： 当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示 监测键盘是否弹起（浏览器页面是否发生变化） 代码： 1、定义一个底部按钮 <div class="returnbtn" v-show="isOriginHei" :class="{act...
移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的解决方案
frank_hehe的博客
06-01 857
之前本来想用文本框聚焦和失焦来显示和隐藏按钮，但是这样有Bug，点击软键盘的收缩键盘按钮，输入框还是聚焦的，按钮显示不出来，这个方法不行；后面找到了一种方法： //动态监控浏览器窗口的变化。当浏览器窗口的大小发生变化时，如果变化后的窗口高度小于初始的窗口高度，则让按钮隐藏起来；反之，则让按钮正常显示。 let winh = document.body.clientHeight;// 取窗口可视范围的高度 window.addEventListener('resize', () => {
Android中底部菜单被输入法顶上去的解决方案
08-31
我们一般的解决方法是获取焦点，底部隐藏，失去焦点，底部菜单出现，但是，有些人会点击这个按钮收起键牌。这篇文章主要介绍了Android中底部菜单被输入法顶上去的解决方案，需要的朋友参考下吧
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
01-19
话不多说，直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种， 一种是监听页面高度（我采用的这种） 一种是监听软键盘事件（ios和安卓实现方式不同，未采用） 下面是实现代码 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.documentElement.clientHeight ||document.body.c
移动端解决输入框唤起键盘时将底部导航栏顶起问题总结
简白的博客
12-21 3760
问题描述   vue基于vant框架开发移动端项目时，出现了这样一个问题：在手机上点击页面输入框时唤起手机自带键盘，结果底部固定的导航栏也被顶起，导致遮挡住页面部分内容 解决办法   这篇文章给出了解决办法解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题   我在本地模拟测试了此方法，是可以解决掉底部被顶起问题，但是在我的某一个项目中，此方法并不能完全解决底部导航栏被顶起问题。究其原因，是我的项目中存在tab标签页，并且底部导航栏是被封装为一个通用组件使用的，当键盘被唤起时需要在页面内使用动
ios移动端把DOM元素固定在软键盘的上方
weixin_50535566的博客
11-16 3541
项目场景： 在h5页面，有个输入匹配框，搜索的结果展示在软键盘之上 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1db004435e4b452385e4e5572bbd7ac3.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5ZG85ZG8fn4=,size_13,color_FFFFFF,t_70,g_se,x_16#pic_center)
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
在知识的海洋里遨游
11-03 1015
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
微信端移动端 底部组件在点击输入框时，被键盘顶上来，导致输入框遮盖
weCat_s的博客
10-13 2499
问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。 这个问题在iOS端不会出现，在安卓端会出现，原因是键盘加载方式不一样，这里不作详情解答。 解决方案：在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部子控件，当键盘消失时再显示底部子控件。 解决方法：检测浏览器的resize事件，当高度
项目总结（关于fixed/absolute固定的底部按钮被input输入框的键盘顶上去的问题一般安卓手机会出现这种问题）
时清云的博客
04-23 6591
解决方法：监控屏幕大小的变化，当屏幕变小的时候让按钮隐藏起来，当屏幕大小与当前屏幕保持一致的时候，让按钮正常显示。 原生js解决方法： var h = document.body.scrollHeight; window.onresize = function(){ if (document.body.scrollHeight < h) { ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
weixin_42517503的博客
05-26 827
在做一个基于企业微信的h5移动页面时，当软键盘弹出时，底部fixed定位在ios上没事，安卓手机上，底部按钮会被顶起到软键盘，查看原应时由于软键盘顶起时，安卓设备的视图会变小。造成固定定位按钮呗顶起。多方查询，并且自己用过后，觉得下面两种方式各有利弊。闲话不说了，看代码吧一、显示隐藏处理这种处理有点局限性，不关闭软键盘，底部按钮不会显示出来。好处是不会卡顿。data () {return {scr...
移动端软键盘弹出时底部 fixed 定位被顶上去
grootbaby
06-18 1675
移动端解决软键盘弹出时底部fixed定位被顶上去的问题 移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue和jQuery两种解决办法。 vue.js代码 <!--html部分--> <div class="footer" v-show="hideshow"></div> // js 部分 data(){ return { docmHeight: document.docum
vue移动端安卓软键盘弹出底部按钮顶起
最新发布
05-28
### Vue移动端安卓软键盘弹出时底部按钮被顶起的解决方案 在Vue移动端开发中，安卓设备上软键盘弹出时，底部按钮（通常使用`position: fixed`定位）会被顶起的问题较为常见。这是由于安卓浏览器在软键盘弹出时会改变可视窗口的高度，导致页面布局重新计算[^2]。 #### 问题分析 当用户点击输入框时，软键盘弹出会触发`window.onresize`事件，此时页面的可视高度发生变化。如果底部按钮使用了`position: fixed`，其位置将基于新的可视高度进行调整，从而导致被顶起的现象[^3]。 #### 解决方案 以下是几种常见的解决方法： 1. **通过监听窗口大小变化动态隐藏底部按钮** 可以通过监听页面高度的变化来判断软键盘是否弹出，并根据情况动态显示或隐藏底部按钮。 ```javascript data() { return { docmHeight: window.innerHeight, // 默认屏幕高度 showHeight: window.innerHeight, // 实时屏幕高度 hideshow: true // 显示或隐藏底部按钮 }; }, mounted() { // 监听窗口大小变化 window.onresize = () => { this.showHeight = window.innerHeight; }; }, watch: { showHeight(newValue) { if (this.docmHeight > newValue) { this.hideshow = false; // 软键盘弹出时隐藏底部按钮 } else { this.hideshow = true; // 软键盘收起时显示底部按钮 } } } ``` 在模板中使用`v-show`控制底部按钮的显示与隐藏： ```html <div class="footer" v-show="hideshow"> <button>确认操作</button> </div> ``` 此方法简单有效，适用于大多数场景[^4]。 2. **修改底部按钮的定位方式** 将底部按钮的定位从`fixed`改为`absolute`，并将其父容器设置为`relative`定位。这样可以避免软键盘弹出时对底部按钮的影响。 ```html <div class="container"> <div class="footer"> <button>确认操作</button> </div> </div> ``` ```css .container { position: relative; height: 100vh; overflow: hidden; } .footer { position: absolute; bottom: 0; left: 0; right: 0; } ``` 此方法适用于页面内容不会超出屏幕高度的情况[^5]。 3. **使用CSS媒体查询适配软键盘** 通过检测软键盘弹出时的窗口高度变化，结合CSS媒体查询实现适配。 ```css @media (max-height: 600px) { /* 假设软键盘弹出后窗口高度小于600px */ .footer { display: none; } } ``` 需要注意的是，不同设备的窗口高度变化可能不同，因此需要根据实际情况调整媒体查询条件。 4. **jQuery实现动态调整** 如果项目中使用了jQuery，可以通过监听页面高度变化动态调整底部按钮的定位。 ```javascript var winHeight = $(window).height(); // 获取当前页面高度 $(window).resize(function () { var thisHeight = $(this).height(); if (winHeight - thisHeight > 140) { // 判断软键盘是否弹出 $('.footer').css('position', 'static'); // 改变定位方式 } else { $('.footer').css({ 'position': 'fixed', 'bottom': '0' }); } }); ``` 此方法适合不使用Vue的项目或需要兼容非Vue组件的场景[^4]。 #### 注意事项 - 不同安卓设备和浏览器的行为可能存在差异，建议在开发过程中多测试几款主流设备。 - iOS设备通常不会出现类似问题，但需要注意部分iOS机型中输入框获取焦点和键盘事件的支持较差[^1]。 ```python # 示例代码仅用于说明，实际开发中需根据具体需求调整 ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值