解决软键盘弹出，同时把底部按钮顶上去问题

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

#软键盘问题

博客主要围绕软键盘弹出时把底部按钮顶上去的问题展开。尝试了在Manifest中添加配置、在Activity中设置软输入模式等方法，但前者因沉浸式标题及布局配置不起作用，后者会使整体布局上移且无法滚动。还提出判断键盘弹出隐藏布局按钮，消失后再显示的方案，并给出参考网址。

前言

问题：软键盘弹出时，会把底部按钮顶上去
在这里插入图片描述

处理方法

尝试方案：
1、 在Manifest中添加
android:windowSoftInputMode=“adjustPan|stateHidden”
该方法不起作用，因为我标题用的是沉浸式ImmersionBar，我在布局里面配置了
android:fitsSystemWindows=“true”，所以不起作用
2、在Activity中添加
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
该方法有问题，设置后会把整体布局顶上去，同时布局不能滚动
3、判断键盘弹出，把顶上去的布局按钮隐藏，键盘消失，再把底部布局显示出来
参考网址：https://blog.youkuaiyun.com/LSLSD/article/details/93094413
在这里插入图片描述

微信小程序 - 获取软键盘高度解决键盘弹出挡住输入框情况，点击textarea、input框唤起键盘并动态获取键盘高度彻底处理软键盘弹出后挡住底部输入框的问题（完美兼容安卓Android与苹果ios）
🏆 前端领域优质创作者
09-23 4248
微信小程序中点击input框唤起键盘，动态获取键盘高度，微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题，底部输入框获取键盘高度动态设置，iOS微信小程序键盘弹出时输入框被挡住，小程序底部input输入框，键盘弹起时页面整体上移问题解决，当input输入框位于页面底部时，输入框聚焦后键盘弹起，页面会整体上移，将输入框所在位置定位到键盘上方，微信小程序如何获取软键盘高度，uniapp输入框被软键盘遮挡的问题，微信小程序键盘弹出挡住输入框问题解决方案，解决微信小程序底部textarea被键盘遮挡的问题，底部
Android开发中关于如何解决Fragment中弹出键盘会把底部菜单栏顶上去的问题以及返回键的监听问题
wlaizff的专栏
12-23 2万+
一，首先为了保证不被键盘顶上去，需要在Manifest中设置定义的FragmentActivity属性 android:windowSoftInputMode="stateHidden|adjustPan"，这样会保证底部栏保持不变。 这个是我自己的FragmentActivity  activity             android:name=".MainIndex
Android中软键盘弹出时底部菜单上移问题
GUOYIHONEY的博客
12-17 3075
当在Android的layout设计里面如果输入框过多，则在输入弹出软键盘的时候，下面的输入框会有一部分被软件盘挡住，从而不能获取焦点输入。 解决办法： 方法一：在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_
Android软键盘弹出时，防止底部Tab按钮被挤上去
wxx的记录窝
04-25 1835
AndroidManifest.xml Activity标签下增加 android:windowSoftInputMode="adjustPan"
Android弹出软键盘时把布局顶上去的解决方法
xige1995的博客
04-13 1万+
无论使用哪种方法，都需要对布局进行合理的设计，以确保布局在软键盘弹出时能够适应屏幕，不会被遮挡或重叠。属性，可以告诉 Android 系统，布局已经适应了系统窗口，并且不需要被调整。属性：在 AndroidManifest.xml 文件中设置 Activity 的。属性，可以让布局成为一个可滚动的容器，从而避免布局被软键盘遮挡的问题。属性，可以在软键盘弹出时自动调整布局。选项会自动调整布局，使其适应软键盘的高度。属性：在布局的根视图中添加。
Android打开软键盘将按钮或布局顶在软键盘的上方
weixin_37587365的博客
10-28 3537
在日常开发过程中经常会遇到提交保存等需求，例如在相对布局中上方有若干个输入框，提交保存按钮在布局的最下方，我们在输入完全部信息后，想要点击提交必须手动关闭软键盘，此时按钮是被遮挡状态，交互很不友好。以上就是今天要讲的内容，本文简单介绍了如何将在打开软键盘的时候将按钮顶在软键盘的上方。
软键盘弹出底部被顶上去
weixin_30367543的博客
09-29 283
var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ 　　if($(document).height() < oHeight){ 　　　　$("#footer").css("position","static");　　}else{ 　　　　$("#footer").css("p...
安卓软键盘弹出将布局底部控件顶上去了，怎么解决？
热门推荐
文化园
10-14 3万+
安卓软键盘弹出将布局的底部控件顶上去了，怎么解决？
Android实现输入法弹出时把布局顶上去和登录按钮顶上去的解决方法
08-28
Android 中实现输入法弹出时把布局顶上去和登录按钮顶上去的解决方法，这个解决方法可以解决在输入密码时输入法软键盘把登录按钮遮挡住的问题。 知识点 1：什么是输入法软键盘？ 输入法软键盘是 Android 中的一个...
Android 设置一个底部控件view随着软键盘的弹出而上移
12-15
总的来说，实现Android底部控件随软键盘弹出上移是一项常见的优化操作，它涉及到对Android布局机制的理解以及适时的事件监听和响应。通过灵活运用Android提供的组件和接口，或者借助第三方库，我们可以轻松解决这个...
Android中底部菜单被输入法顶上去的解决方案
08-31
在Android应用开发中，经常会遇到一个问题，即当用户在界面中触发软键盘输入时，底部菜单（如导航栏）会被输入法遮挡。这给用户体验带来了不便，因为底部菜单通常是重要的操作区域。本文将探讨几种解决这个问题的...
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
10-16
最后，文章提出了一种实用的解决方案：当键盘弹出时，可以选择隐藏那些fixed布局的元素，如底部按钮。如果按钮必须出现，则需要确保按钮在键盘弹出时回归到正常的页面流中，例如通过动态调整其定位方式，从而保证在...
Android 设置输入法[软键盘]将底部布局推上去
风吹草低见牛羊
09-18 1209
效果 说明： 1适用范围Android 6.0（23）及以上，Android 5.0标题栏不太适配，看注释 2.也可以使用popwindow来实现，晚上很多例子了 操作如下 1.设置Manifest中Activtiy的theme属性如下： <activity android:name=".ui.CommentsActivity" android:theme="@style/search_edit" > <intent
可以防止tabHost底部菜单被挤输入法挤上去
w23851342的博客
07-04 511
activity android:name=".HomePageActivity" android:windowSoftInputMode="adjustPan" android:theme="@style/noBar" android:screenOrientation="portrait"/> 中 android:windowSoftInputMode="adjustPan"
安卓软键盘导致底部按钮顶上来的问题
CherryCola_zjl的博客
01-11 907
h5网页中，软键盘弹起底部fixed定位元素会被顶起来，挡住部分内容 const h = document.body.scrollHeight //获取当前页面高度 window.onresize = function () { // onresize监听窗口高度变化 if (document.body.scrollHeight &lt; h) { document.body...
【个人笔记】解决fixed布局，安卓软键盘会顶起底部固定的按钮的问题
wusq的博客
10-02 4108
1.问题 fixed布局的tab栏在安卓浏览器上，聚焦在输入框时，弹出的输入框会将tab栏顶到输入框上方，挡住页面。 fixed定位的tab栏 出现的键盘将tab栏顶到页面中间 2.思路 监听键盘弹出的事件…也就是监听页面的可见高度clientHeight 先保存页面最初的可见高度，然后监听高度变化（resize），当新的高度小于原来的高度时，判断是键盘弹出 键盘弹出时将tab栏隐藏起来 实现效果 代码如下，在全局（app.vue）添加 mounted() { window.addEv
软键盘弹出顶起底部按钮
Sandergen的博客
04-14 357
AndroidManifest.xml文件 activity属性中增加 android:windowSoftInputMode=“adjustPan|stateHidden” windowSoftInputMode属性不在此说 链接: https://blog.youkuaiyun.com/yunnywu/article/details/7926015?ops_request_misc=&request_id=&biz_id=102&utm_term=android:windowSoftInpu
Android软键盘弹出时把布局顶上去的解决方法
csdn_lwp的博客
02-06 1412
在你的清单文件AndroidManifest.xml 里边的对应的 Activity里边配置 <activity android:name=".MainActivity" android:label="@string/app_name" android:launchMode="singleTask" android:screenOrientation="portr
Kotlin中object和companion object 区别
LSLSD的博客
04-20 1万+
文章参考网址： 区别Kotlin中的object和companion object关键字 概括： object声明（一个类）是延迟加载的，只有当第一次被访问时才会初始化，所以被用来实现单例 companion object是当包含它的类被加载时就初始化了的，这一点和Java的static还是一样的 基本区别： object 可以定义在全局也可以在类的内部使用 object 就是单例模式的化身...
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 # 示例代码仅用于说明，实际开发中需根据具体需求调整 ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值