键盘弹起时,输入框被挡,且其它view被顶上去

最新推荐文章于 2024-05-14 03:40:16 发布
原创 最新推荐文章于 2024-05-14 03:40:16 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了直播页面中键盘弹出导致输入框被遮挡的问题。通过调整全屏模式的切换时机，在输入框聚焦和失焦时分别取消和启用全屏，确保了用户体验。

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

今天在调一个直播页面时,  碰到个问题:键盘弹起时,输入框被挡,且其它view被顶上去. 


调了好久, 无法解决.  而其它页面则正常.


查了资料, 终于找到问题所在.    由于直播页面, 设置了全屏模式. 在此模式下, adjustResize不起效果.  所以会出现问题.  

把全屏模式功能取消, 则 正常.  ------------------------暂时解决 .


ps:  但是我们直播页面, 又要求需要全屏展示,   暂时还没找到方法 .  如果有大神知道方案,  请在评论中指教下.   如果没碰到过, 也可以探讨下.


已解决:

上述bug是android系统存在的问题, 全屏模式下, adjustResize失效.   此时可对输入框进行监控.

在oncreate设置代码或者style样式. 设置该activity全屏. 如:getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN); // 全屏


在edittext隐藏示前, 启用全屏模式,

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
Utility.hideSoftInput(QavAvActivity.this);
layBottom.setVisibility(View.GONE); 


在edittext显示前, 取消全屏模式

getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
Utility.showSoftInput(QavAvActivity.this);
chatEditView.requestFocus();
layBottom.setVisibility(View.VISIBLE);


uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 1万+
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
Android进阶之路 - 解决WebView加载H5时软键盘遮挡输入框问题
Android、前端、小程序、后端
08-06 3730
我遇到的这个问题，花费了好几天时间去解决，后面才发现该问题可能很早以前就存在了，而且很多人特意将其解决方式以。提供的是整个物理屏幕的度量信息，包括系统 UI 元素所占用的部分。经验总是有限的，越学越无知，总是能深刻的了解到学无止境。不过还是有必要说一下我所遇问题和解决过程。
Android 设置一个底部控件view随着软键盘的弹出而上移
12-15
Android 底部控件随软键盘弹出而上移demo
设置键盘弹起后整个View处于键盘上方
qq_34881609的博客
04-27 721
设计效果图如下 但是在制作过程中发现每次键盘弹出时始终是定位在edittext的下方，达不到设计效果， 最后发现在视图外层加一个scrollview 再弹出键盘就可以了， 另外一开始想用dialog写，但是自定义AlertDialog需要解决键盘无法弹出、以及根据键盘状态去修改dialog位置。感觉还不如用activity来写，于是就偷了个懒 记住要改变activity的  
2024年Android最全关于Android弹出软键盘“顶起”View的问题(1)，面试心得体会500字
2301_79098336的博客
05-14 277
以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。
Android 软件盘弹出时把view顶上去的处理方法
julystroy的博客
11-29 1632
现象如图： 解决方法： 一 、在清单文件里对应的activity中： 1> 加入：android:windowSoftInputMode="adjustPan"，这样软键盘弹出时会直接覆盖view 2> 加入：android:windowSoftInputMode="stateVisible|adjustResize"，这样整个屏幕会上移动 二、在对应的activity中oncrea...
在fragment中调用虚拟键盘，如何将底部那一栏顶上去
12-30 458
在fragment中有个edittext，有底部操作的一栏，调用虚拟键盘时，将底部遮挡，在配置文件AndroidMainfest.xml中的activity中写了android:windowSoftInputMode="adjustPan"，可还是不管用，请大神帮忙讲解一下
swift3.0键盘弹起遮挡输入框问题的解决方案
09-01
当键盘弹出时，它会改变屏幕的可见区域，通常会导致输入框被隐藏在键盘下方。为了解决这个问题，我们可以监听键盘的显示和隐藏事件，并相应地调整视图的位置。 在Swift中，我们可以利用`UITextFieldDelegate`协议来...
解决uni-app中使用webview键盘弹起遮挡input输入框问题
九段刀客的博客
03-04 2440
这个平平无奇的回答，可能是全网最靠谱的解决方案。这里我用的是vue3 setup .vue文件的方式
5种方法完美解决android软键盘挡住输入框方法详解
01-20
- `adjustResize`：当键盘弹出时，Activity窗口会尝试调整大小，让输入框始终可见。适合布局中有ScrollView或者输入框属于RecyclerView/ListView某一项的情况。优点是不会把标题栏顶出布局，但需要界面可调整尺寸，...
Android实现输入法弹出时把布局顶上去和登录按钮顶上去的解决方法
08-28
主要介绍了Android实现输入法弹出时把布局顶上去和登录按钮顶上去的解决方法,需要的朋友可以参考下
Android 关于键盘弹出顶出输入框并不上移布局处理
qq_43679375的博客
06-26 7200
解决Android 调起键盘时输入框跟随移动，标题栏不上移，输入框底部view不被顶出
（Vue）移动端点击输入框，弹出键盘，底部被顶起问题
weixin_54386178的博客
07-26 1567
**在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部footer部分，当键盘消失时再显示底部footer部分就可以解决问题了。 解决方法：检测浏览器的resize事件，当高度过小时就可以判定为出现这种情况，这时把定位改成absolute或者直接隐藏掉之类的。** 先在 data 中去 定义 一个记录高度是 属性 data () { return { docmHeight: document.documentElement.clientHeight,
android:如何做到软件盘弹出只顶起输入框
Code Issuer的博客
10-26 8942
最近在做视频直播项目中遇到这个问题，当用户点击主播房间，进行直播观看，在下方点击输入框发送信息时，发现了不光是EdiTextView 被软键盘弹起，就连surfaceView也被压扁了。哦,忘记说一点我在Manifest.xml定义该Activity的属性中添加的是WindowSoftInputMode="adjustResize"。 首先说一下两种WindowSoftInputMode的两个属
Android 输入法将BottomNavigationView顶上去的问题
Z_PTOPONE的博客
10-16 926
注意：清单文件指的是 AndroidManifest.xml 这个文件。
android RelativeLayout布局中防止view被键盘顶上去的方法
qiaqiaqia77的博客
11-01 3210
如图，外层是RelativeLayout，LinearLayout里用layout_alignParentBottom="true"把布局放到底部 这里截图省略了中间各种输入框，问题出现，点击输入框，底部弹出软键盘，并且将底部菜单栏顶到键盘上面，怎么让它不受键盘影响呢？ 设置距离顶部marginTop固定值，但是这样需要计算距离，不想这么麻烦，下面这种是简便方法 在activity里图片处添...
EditText软键盘挡住输入框或者顶出导航栏，解决方案
m0_38054710的博客
04-29 1477
EditText如果设置不好，要么是软键盘挡住输入框，要么是内容上顶覆盖掉了导航栏。完美解决方案： 在manifest 文件设置 : android:windowSoftInputMode=”stateVisible|adjustPan” 在layout文件中设置 : android:fitsSystemWindows=”true”引用 在oncreate里设置: getWin...
Android开发软键盘遮挡问题汇总
MrQ
08-23 1880
最近好多人在Android开发中都遇到了登录界面或者其他地方,弹出软键盘的时候遮挡按钮或者输入框或按钮的问题,所以在这里集思广益将网上大部分的思路整合一下,贴出来
小程序键盘弹起影响输入框
最新发布
07-05
<think>我们正在解决小程序中键盘弹起导致输入框被遮挡或页面整体上移的问题。根据引用内容，我们可以总结出几种解决方案： 1. **调整页面布局（推荐）**：在`pages.json`中配置`softinputMode`为`adjustResize`（App端）或使用微信小程序的`adjust-position`属性（小程序端）。 2. **动态调整输入框位置**：监听键盘弹起事件，获取键盘高度，动态设置输入框的底部距离（bottom）为键盘高度，使输入框上移至键盘上方。 3. **防止页面整体上移**：在小程序端，设置输入框的`adjust-position`属性为`false`，避免页面整体上移，然后通过监听键盘高度变化来调整输入框位置。 具体实现步骤： ### 方案一：配置页面软键盘弹出方式（App端） 在`pages.json`中针对特定页面配置： ```json { "path": "pages/yourPage", "style": { "app-plus": { "softinputMode": "adjustResize" } } } ``` 这样设置后，键盘弹起时页面会自动调整，输入框不会被遮挡。 ### 方案二：动态调整输入框位置（适用于小程序和H5） 1. 在输入框组件中设置`adjust-position`为`false`（仅小程序），防止页面整体上移。 2. 监听键盘弹起和收起事件，获取键盘高度，动态设置输入框的底部距离。 **示例代码（小程序组件中）：** ```vue <template> <view class="input-container" :style="{ bottom: inputBottom }"> <input :adjust-position="false" @focus="onFocus" @blur="onBlur" placeholder="请输入内容" /> </view> </template> <script> export default { data() { return { inputBottom: '0' // 初始底部距离 }; }, methods: { onFocus(e) { // 在微信小程序中，可以通过e.detail.height获取键盘高度 // 注意：在H5或App端可能需要使用其他方式获取键盘高度 if (e.detail.height) { this.inputBottom = e.detail.height + 'px'; } }, onBlur() { this.inputBottom = '0'; } } }; </script> <style> .input-container { position: fixed; left: 0; right: 0; bottom: 0; /* 其他样式 */ } </style> ``` ### 方案三：使用微信小程序的键盘高度变化监听（仅小程序） 在页面中监听键盘高度变化事件，动态调整输入框位置。 ```javascript // 页面js Page({ data: { inputBottom: 0 }, onLoad() { const that = this; // 监听键盘高度变化 wx.onKeyboardHeightChange(res => { if (res.height > 0) { // 键盘弹起 that.setData({ inputBottom: res.height }); } else { // 键盘收起 that.setData({ inputBottom: 0 }); } }); } }); ``` 在wxml中： ```xml <view class="input-box" style="bottom: {{inputBottom}}px"> <input adjust-position="{{false}}" /> </view> ``` ### 注意事项： 1. 在微信小程序中，`adjust-position`属性设置为`false`可以防止页面整体上移，但需要自己处理输入框位置。 2. 在H5端，可能无法直接获取键盘高度，需要根据浏览器特性处理（引用1中提到的动态计算键盘高度方法）。 3. 在App端，推荐使用`softinputMode`配置。 ### 兼容性处理： - 小程序：使用方案二或三。 - App：使用`softinputMode`配置。 - H5：可能需要通过监听窗口大小变化来模拟键盘高度变化（因为H5中键盘弹出可能会改变窗口可视区域高度）。 以上方案可根据实际运行环境选择使用。如果同时需要兼容多端，建议使用条件编译。 §§相关问题§§ 1. 如何在小程序中动态获取键盘高度？ 2. 在H5端如何解决键盘遮挡输入框的问题？ 3. App端除了配置`softinputMode`还有其他方法吗？</think>### 解决小程序键盘弹起遮挡输入框问题 在小程序中解决键盘弹起导致输入框被遮挡或页面整体上移的问题，可参考以下解决方案： #### 核心方案：动态调整输入框位置 ```vue <template> <!-- 固定底部的输入框容器 --> <view class="input-box" :style="{ bottom: inputBoxBottom }"> <input :adjust-position="false" // 关键：禁止页面整体上移 @focus="onFocus" @blur="onBlur" placeholder="请输入内容" /> </view> </template> <script> export default { data() { return { inputBoxBottom: '0' // 初始底部距离 } }, methods: { // 键盘弹起时触发 onFocus(e) { // 获取键盘高度并设置底部距离 this.inputBoxBottom = `${e.detail.height}px`; }, // 键盘收起时触发 onBlur() { this.inputBoxBottom = '0'; } } } </script> <style> .input-box { position: fixed; left: 0; right: 0; background: #fff; padding: 10px; transition: bottom 0.3s; } </style> ``` #### 关键配置说明： 1. **`adjust-position="false"`** 禁止页面整体上移（微信小程序特有属性）[^3] 2. **键盘事件监听** - `@focus`：获取键盘高度 `e.detail.height` - `@blur`：重置底部距离 3. **样式要点** - 使用 `position: fixed` 固定底部位置 - 通过动态设置 `bottom` 值实现上推效果 - 添加过渡动画提升体验 #### 替代方案：页面配置文件设置 在 `pages.json` 中配置： ```json { "path": "pages/yourPage", "style": { "app-plus": { "softinputMode": "adjustResize" // 自动调整页面布局 } } } ``` 此方案适用于App端，页面内容会自动压缩避免遮挡[^5]。 #### 注意事项： 1. 键盘高度值需添加单位 `px`（如：`'50px'`）[^3] 2. 在iOS端可能需要额外处理滚动定位问题 3. 测试不同手机型号的兼容性 4. 对于H5页面，可能需要监听窗口尺寸变化 > 实际测试表明，动态调整位置方案在微信小程序中兼容性最佳，能解决90%的遮挡问题[^1][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值