如何解决移动端键盘弹起将底部导航栏顶起

最新推荐文章于 2024-08-03 06:35:50 发布
最新推荐文章于 2024-08-03 06:35:50 发布
阅读量599 收藏
点赞数
分类专栏： 移动端 文章标签： javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44302838/article/details/109721295
版权
这篇博客介绍了如何使用JavaScript通过一行代码实现当键盘弹起时，底部导航栏自动消失的效果。通过获取footer元素并计算屏幕可视区域高度减去元素高度，设置footer的top值，实现了底部导航栏的动态隐藏，适用于移动应用或网页开发中的键盘事件处理。
摘要由CSDN通过智能技术生成

一行代码搞定

/*输入键盘弹起,底部导航栏消失*/
var bottomEl = document.querySelector('footer');  
// 可见区域高度减去元素的高度  
bottomEl.style.top = document.documentElement.clientHeight - 60 + 'px';
一 者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用vue自定义指令与vuex解决移动端点击输入框，弹出键盘，底部导航被顶起问题
qq_41836598的博客
08-27 1105
App.vue中 HTML部分： <div v-show="footer"> <Footer/> </div> js部分： <script> import Vue from 'vue' import store from './store/index.js' import Footer from './components/FooterGu...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
Xu0401的博客
11-16 7469
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题 解决思路：1.设置使键盘弹起使页面不上移；2.设置输入框所在盒子为绝对定位；3.键盘弹起时获取键盘高度；4.设置输入框所在盒子的bottom的键盘高度；5.清除输入框固定定位导致的浮动（在输入框盒子的上面盒子下方设置padding-bottom【高度与输入框相同】；或者在输入框所在盒子上面加一个块级元素【高度与输入框相同】）
移动端键盘问题
pink124的博客
10-11 260
点击input 就会出现键盘，后来自己用div代替了input,写省市区的时候从下面滑上来的bottomsheet，因为和键盘滑下去冲突，就实现了延迟加载省市区
解决移动端手机虚拟键盘弹起遮盖输入框
qq_44294202的博客
12-17 632
移动端H5页面虚拟键盘弹起，让Input自适应上升 兼容微信和钉钉： 给input添加获取焦点事件： 将底部的输入框整体滚动： 注意：底部的输入框要用子绝对父相对 focusFn(a){ let ele=document.querySelector('.ipt_frame'); setTimeout(function(){ ele.scrollIntoView(false); document.body.scrollTop = do
ionic中键盘把tabs顶上去的解决方法（android）
li00828的博客
10-23 4119
在android中ionic的键盘会把tabs顶上去的解决方法 在github上找到的解决方法，解决了我遇到的问题，发出来希望能帮到更多的人。 https://github.com/ionic-team/ionic/issues/7047 在tab.ts中 具体的page.ts 具体就是在tab.ts中封装一个event事件，用来隐藏t
Android 键盘把底部导航顶上去的解决办法
weixin_42630638的博客
05-08 1387
android开发中有editetext，当输入时输入法会把底部的导航栏顶上去。如何解决？ 一行代码搞定 在AndroidManifest.xml中给这个Activity设置 android:windowSoftInputMode="adjustPan|stateHidden" ...
H5 防止安卓手机软键盘弹出挤压页面导致变形的方法
weixin_48596030的博客
08-11 3558
安卓中，因为软键盘会改变页面的高度（将页面顶上来）
移动端因软键盘的原因，固定在页面底部的按钮被弹起解决方案
kuke_kuke的博客
01-17 8441
问题描述：移动端，当需要输入内容时，软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起，如图： 解决思路： 当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示 监测键盘是否弹起（浏览器页面是否发生变化） 代码： 1、定义一个底部按钮 &lt;div class="returnbtn" v-show="isOriginHei" :class="{act...
移动端开发注意的事宜
weixin_44465584的博客
03-16 4701
1.什么是移动端开发？以及开发的工具？有哪些方式？ 移动开发也称为手机开发，或叫做移动互联网开发。是指以手机、PDA、UMPC等便携终端为基础，进行相应的开发工作，由于这些随身设备基本都采用无线上网的方式，因此，业内也称作为无线开发。 移动应用开发是为小型、无线计算设备编写软件的流程和程序的集合，像智能手机或者平板电脑。移动应用开发类似于Web应用开发，起源于更为传统的软件开发。但关键的不同在于移...
(五)移动端测试
最新发布
jylee的博客
08-03 707
正确回答通过率：62.0%[ 详情 ] 推荐指数： ★★★★ 试题难度： 中级一、功能性功能性测试之安装：· 安装过程中是否可以取消· 软件安装后是否可以正常运行· 安装空间不足时是否有相应提示· 软件安装过程中意外情况（如死机，重启，断电）的处理是否符合需求· 安装后没有生成多余的目录结构和文件· 在必要的权限未选择后是否可以安装且后续可设置· 重复安装是否自动更新为当前安装版本功能性测试之卸载：· 是否可以通过桌面卸载或通过软件安装包卸载。
移动端键盘弹起对布局的影响
weixin_30508241的博客
03-05 404
最近开发的一个基于mui框架开发的App已经基本结束，但是在开发过程中遇到了一个点击搜索框触发软键盘弹起的问题，现在总结一下 当键盘弹起时会整体上移一个键盘的高度，如果使用的是fixed布局，该部分会上移到键盘上部。 自动获取焦点，mui中关于键盘弹出自动获取焦点 1、监听resize (Android） var winHeight = $(window).height(); //...
移动端h5页面，当软键盘弹出时，会将底部导航footer顶上去，怎么解决？？？
u010565037的博客
02-29 809
这个需要你js来判断下 var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#foote...
移动端键盘弹起底部固定布局被顶上去
weixin_38673922的博客
07-14 1372
问题：移动端登录页面布局，将div固定到底部，input点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去。 解决办法： <van-row v-show="isOriginHei"> <p style="position: fixed;bottom:20px;left:0;right:0;">Powered by xxxx信息技术有限公司</p> </van-row> export default{ data(){ r
解决移动端H5页面点击输入框弹出键盘时将底部导航栏挤至上面
zhazhashuai1999的博客
08-12 3056
1.将导航栏position改为static或者relative position: relative | static; 2.如果不方便设置导航栏定位方式,可以监听浏览器输入框聚焦事件. 点击输入框 --> 触发浏览器focusin事件 --> 隐藏底部导航栏 ( --> 弹出键盘) --> 输入完成 --> 触发浏览器focusout事件 (--> 收起键盘) --> 重新渲染导航栏 document.body.addEventListene...
解决底部导航栏被软键盘顶上去的问题
XuWei1213的博客
11-07 3912
软键盘弹出把底部导航栏挤上去的解决方法有好几种，这儿我把自己解决的一种办法记录下来。如果有其他的解决方法，欢迎留言。 在AndroidManifest.xml文件也就是所谓的清单配置文件中，找到你软键盘弹出的那个页面的Activity，然后在下边写上一句 android:windowSoftInputMode="adjustPan 例：              an
关于微信小程序开发中input、textarea等表单组件在键盘弹起时，页面显示内容被挤出顶部导航栏，解决方案的建议
qq_35464957的博客
05-08 1967
关于微信小程序开发中input、textarea等表单组件在键盘弹起时，页面显示内容被挤出顶部导航栏，解决方案的建议 代码附图，希望采纳 /** * 键盘弹起时，解决键盘遮挡问题 开启键盘时 */ function keyboardOcclusion(e) { if (this.data.scroll_top > 0) { return; } const res = wx.getSystemInfoSync(); let windowHeight = res.windo
h5 android底部导航栏,H5端软键盘把footer底部导航栏顶上去了怎么解决？
weixin_42127783的博客
05-27 593
这个问题是WebApp的通病，特别是用了BootStrap的底部导航栏，又用了input选中时自动移到合适位置，避免软键盘覆盖的时候，会特别明显。网上有不少分享，都是通过js来实现的，因为我是在安卓手机端，试了多个不管用。比方说这个：var oHeight = $(document).height(); //浏览器当前的高度$(window).resize(function(){//ios软键盘弹...
如何监听移动端键盘弹出事件
03-30
在移动端，键盘弹出事件通常会影响页面布局和用户交互。因此，监听键盘弹出事件是很有必要的。下面是一些实现方法： 1. 使用focus和blur事件 在移动端，当用户点击一个可编辑的元素时，浏览器会自动弹出键盘。因此...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值