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

最新推荐文章于 2022-11-03 15:16:49 发布
最新推荐文章于 2022-11-03 15:16:49 发布
阅读量1.7k 收藏 5
点赞数 1
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tmengxing/article/details/122685087
版权
本文记录了在移动端开发过程中遇到的一个问题，即在安卓设备上，当输入框聚焦时底部固定定位的按钮会被软键盘推上去。为了解决这个问题，通过在Vue项目的mounted生命周期中监听窗口resize事件，并根据窗口高度变化调整布局，实现了底部按钮在软键盘弹出时不被遮挡的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

mounted() {
   
	//首次进入的原始高度
	this.originalHeight = window.innerHeight;
	window.addEventListener('resize',
最低0.47元/天 解锁文章
Tmengxing
关注
移动端因软键盘的原因，固定在页面底部的按钮被弹起解决方案
kuke_kuke的博客
01-17 8521
问题描述：移动端，当需要输入内容时，软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起，如图： 解决思路： 当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示 监测键盘是否弹起（浏览器页面是否发生变化） 代码： 1、定义一个底部按钮 <div class="returnbtn" v-show="isOriginHei" :class="{act...
vue移动端安卓软键盘弹出底部按钮顶起
qq_38096835的博客
08-04 1209
这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 一、显示隐藏处理 监听页面高度 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
Android中底部菜单被输入法顶上去的解决方案
08-31
我们一般的解决方法是获取焦点，底部隐藏，失去焦点，底部菜单出现，但是，有些人会点击这个按钮收起键牌。这篇文章主要介绍了Android中底部菜单被输入法顶上去的解决方案，需要的朋友参考下吧
android软键盘把底部按钮顶上去,关于Android软键盘把布局顶上去的问题
weixin_39637386的博客
05-26 944
首先说下我的需求：布局最上面是一个bar,有左上角返回按钮和标题，bar下面是一个ScrollView，里面有各种TextView和EditText，点击下面的EditText时，不希望软键盘把bar给顶上去(看不见)。下面几点需要注意：1.在AndroidManifest中相应的activity配置android:windowSoftInputMode="adjustResize|stateHi...
移动端H5输入框调用手机软键盘，导致底部固定定位被顶起问题解决
u014165391的博客
08-18 6548
可以监听window对象的resize事件，判断当前屏幕高度是否小于原始屏幕高度，从而来对底部定位的元素控制其显示、隐藏；这个可以解决大部分手机的固定定位被顶起问题，但是对于部分iphone手机使用某些第三方输入法关闭事件可能监听不到。部分安卓和ihpone手机在调起手机软键盘时，会将固定定位元素顶起；当页面内容过多时，会导致内容被遮挡，无法查看，从而影响用户体验；......
移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的解决方案
frank_hehe的博客
06-01 820
之前本来想用文本框聚焦和失焦来显示和隐藏按钮，但是这样有Bug，点击软键盘的收缩键盘按钮，输入框还是聚焦的，按钮显示不出来，这个方法不行；后面找到了一种方法： //动态监控浏览器窗口的变化。当浏览器窗口的大小发生变化时，如果变化后的窗口高度小于初始的窗口高度，则让按钮隐藏起来；反之，则让按钮正常显示。 let winh = document.body.clientHeight;// 取窗口可视范围的高度 window.addEventListener('resize', () => {
移动端解决输入框唤起键盘时将底部导航栏顶起问题总结
简白的博客
12-21 3476
问题描述   vue基于vant框架开发移动端项目时，出现了这样一个问题：在手机上点击页面输入框时唤起手机自带键盘，结果底部固定的导航栏也被顶起，导致遮挡住页面部分内容 解决办法   这篇文章给出了解决办法解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题   我在本地模拟测试了此方法，是可以解决掉底部被顶起问题，但是在我的某一个项目中，此方法并不能完全解决底部导航栏被顶起问题。究其原因，是我的项目中存在tab标签页，并且底部导航栏是被封装为一个通用组件使用的，当键盘被唤起时需要在页面内使用动
移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)
01-04
由于公司需求，需要做一个实时...然后自己就尝试了各种方法，什么定时器、绝对定位、固定定位、计算屏幕高度再定位等等，都没有作用，键盘出来后还是会遮挡住。最后只能上网查找答案，找了半天，终于找到了答案，这里要
h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】
weixin_39733232的博客
10-19 1630
转载链接：https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。true，表示元素的顶部与当前区域的可见部分的顶部对齐false，表示元素的底部与当前区域的可见部分的尾部对齐Element...
ios移动端把DOM元素固定在软键盘的上方
weixin_50535566的博客
11-16 3488
项目场景： 在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 解决移动端弹出键盘导致页面fixed布局错乱的问题
01-19
话不多说，直接上问题图片 这里确认按钮是fixed布局 bottom:0 弹出键盘之后按钮被顶到了键盘上面 网上搜到的解决方案有两种， 一种是监听页面高度（我采用的这种） 一种是监听软键盘事件（ios和安卓实现方式不同，未采用） 下面是实现代码 data() { return { docmHeight: document.documentElement.clientHeight ||document.body.clientHeight, showHeight: document.documentElement.clientHeight ||document.body.c
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
在知识的海洋里遨游
11-03 985
vue h5 在安卓手机端input获得焦点后软键盘弹出顶起页面和fixed问题
微信端移动端 底部组件在点击输入框时，被键盘顶上来，导致输入框遮盖
weCat_s的博客
10-13 2442
问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。 这个问题在iOS端不会出现，在安卓端会出现，原因是键盘加载方式不一样，这里不作详情解答。 解决方案：在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部子控件，当键盘消失时再显示底部子控件。 解决方法：检测浏览器的resize事件，当高度
项目总结（关于fixed/absolute固定的底部按钮被input输入框的键盘顶上去的问题一般安卓手机会出现这种问题）
时清云的博客
04-23 6544
解决方法：监控屏幕大小的变化，当屏幕变小的时候让按钮隐藏起来，当屏幕大小与当前屏幕保持一致的时候，让按钮正常显示。 原生js解决方法： var h = document.body.scrollHeight; window.onresize = function(){ if (document.body.scrollHeight < h) { ...
移动端登录界面，登录按钮会被虚拟键盘顶上去影响输入问题,登录按钮被隐藏bugfix
qq_44948905的博客
07-06 254
移动端弹出键盘遮盖输入问题
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
weixin_42517503的博客
05-26 768
在做一个基于企业微信的h5移动页面时，当软键盘弹出时，底部fixed定位在ios上没事，安卓手机上，底部按钮会被顶起到软键盘，查看原应时由于软键盘顶起时，安卓设备的视图会变小。造成固定定位按钮呗顶起。多方查询，并且自己用过后，觉得下面两种方式各有利弊。闲话不说了，看代码吧一、显示隐藏处理这种处理有点局限性，不关闭软键盘，底部按钮不会显示出来。好处是不会卡顿。data () {return {scr...
移动端软键盘弹出时底部 fixed 定位被顶上去
grootbaby
06-18 1586
移动端解决软键盘弹出时底部fixed定位被顶上去的问题 移动端页面的底部菜单栏，通常会使用fixed定位在底部。在安卓手机上经常会出现软键盘弹出时，底部定位被顶上去，下面提供vue和jQuery两种解决办法。 vue.js代码 <!--html部分--> <div class="footer" v-show="hideshow"></div> // js 部分 data(){ return { docmHeight: document.docum
移动端弹出软键盘时会将页面顶上去
HEWNCP的博客
12-24 3463
之前做移动端项目时有出现过这样的情况，主要原因是因为当软键盘弹出，因为软键盘与页面处于相同层级，软键盘的出现会破坏原本的样式，造成部分页面不可见问题 还有一个细节问题，之前因为会出现浏览器保存的信息（类似于模糊查找），弹出后如果不选择弹出的选项的话，直接关闭软键盘，弹出的位置不会改变，影响效果 需要在input框阻止自动填充 注：当时我设置最外层父元素为相对定位，不可将之设置为固定定位，否则下面样...
vue--ios手机input点击手机输入键盘顶起页面解决方案
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-30 4233
<input type="text" placeholder="请填写手机号" maxlength="11" v-model="phone" @focus="getFocus" /> getFocus() { $("input").on("blur", function() { window.scroll(0, 0); }); },
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值