软键盘盖住输入框的解决办法

最新推荐文章于 2024-11-12 14:36:06 发布

原创最新推荐文章于 2024-11-12 14:36:06 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

开发中遇到的问题专栏收录该内容

4 篇文章

订阅专栏

本文介绍了解决Android应用中软键盘遮挡输入框的问题，提供了三种有效的方法：通过在Activity的onCreate方法中设置调整平移、在Mainfest文件中配置Activity属性以及使用ScrollView作为顶层布局。

输入框过多时，下面一部分输入框被软键盘挡住，从而不能获取焦点

方法1.在该activity中的onCreate（）中的setContentView（）方法之前写上

getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);

方法2.在Mainfase.xml中(对应的activity中)

android:windowsoftInputMode="stateVisible|adjustPan"//启动界面开启软件盘
android:windowsoftInputMode="stateHidden|adjustResize";//启动界面开启隐藏软键盘

方法3.顶级layout替换成ScrollView

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

百慕达s

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - 解决软键盘弹起遮挡输入框的问题，微信小程序input输入框被弹出的软键盘遮挡住一半或全部挡住了（键盘弹起时页面整体上移导致输入框被盖住挡住一部分，textarea同样可解决适用保搞定）

🏆 前端领域优质创作者

09-07

4052

微信小程序防止输入框被键盘遮住，微信小程序软键盘弹起遮挡输入框的问题，微信小程序输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，弹出键盘时遮挡输入框，小程序苹果ios输入框被键盘遮挡，小程序底部input输入框，键盘弹起时页面整体上移问题解决，iOS微信小程序键盘弹出时输入框被挡住，微信小程序textarea软键盘遮挡解决方案，微信小程序底部输入框，键盘弹起时页面整体上移问题，input在底部时，会被弹出的键盘遮住，微信小程序弹出键盘遮挡住输入框，UniApp微信小程序页面输入框被弹出的键盘遮挡住，弹

微信小程序 - 获取软键盘高度解决键盘弹出挡住输入框情况，点击textarea、input框唤起键盘并动态获取键盘高度彻底处理软键盘弹出后挡住底部输入框的问题（完美兼容安卓Android与苹果ios）

最新发布

🏆 前端领域优质创作者

09-23

4257

微信小程序中点击input框唤起键盘，动态获取键盘高度，微信小程序通过获取键盘高度解决键盘弹出挡住输入框问题，底部输入框获取键盘高度动态设置，iOS微信小程序键盘弹出时输入框被挡住，小程序底部input输入框，键盘弹起时页面整体上移问题解决，当input输入框位于页面底部时，输入框聚焦后键盘弹起，页面会整体上移，将输入框所在位置定位到键盘上方，微信小程序如何获取软键盘高度，uniapp输入框被软键盘遮挡的问题，微信小程序键盘弹出挡住输入框问题解决方案，解决微信小程序底部textarea被键盘遮挡的问题，底部

参与评论您还未登录，请先登录后发表或查看评论

鸿蒙5.0版开发：ArkTS组件-RichEditor

m0_69424697的博客

11-12

562

支持图文混排和文本交互式编辑的组件。

Swift 解决软键盘弹出遮挡输入框的问题，使软键盘贴紧输入框下边

zhumj_zhumj的专栏

07-04

3710

import UIKit class ViewController: BaseViewController { @IBOutlet weak var etWifi: UITextField! @IBOutlet weak var etPassword: UITextField! //记录 self.view 的原始 origin.y private ...

android 屏蔽程序自动弹出虚拟键盘

xiongyingzhuantu的专栏

12-29

3713

<br />默认输入框获得焦点时软键盘会打开，可以通过设置AndroidManifest.xml文件里的activity属性<br /> android:windowSoftInputMode="stateAlwaysHidden"<br /> 即可禁止自动弹出

虚拟键盘挡住了输入框怎么办？加两行代码就行

梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到安宁.

04-23

1393

如果实在PopupWindow里面就加上 popup.setInputMethodMode(PopupWindow.INPUT_METHOD_NEEDED); popup.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); <activity android:name=".MealActi

Delphi XE 10.2 FMX 程序中避免输入焦点被虚拟键盘遮挡

04-24

用这个处理Android处理键盘的方法，感觉真是爽通了！建议你也试试，将本单元加到项目即可。再回头看看Delphi的例子，就显得太弱了！

DelphiXE10安卓开发（实战篇）

06-30

实战方式讲解DelphiXE10的安卓开发，从安卓开发开发环境配置开始讲解，实战讲解如何使用FMX进行安卓开发，App的创建，调试，UI设计、让学员快速入门Delphi安卓App的开发

键盘遮挡输入框的问题

weixin_30483495的博客

07-28

126

1.在ViewController.m文件声明 #import "ViewController.h" @interface ViewController ()<UITableViewDelegate,UITableViewDataSource,UITextFieldDelegate> @property(nonatomic,strong)UITableView *ta...

解决键盘挡住输入框问题(APP调整)

weixin_34221773的博客

01-04

462

➢ 问题：键盘挡住输入框,并且页面无法滚动,scrollIntoView无效➢ 场景：安卓部分机型,嵌入在APP WebView的H5页面➢ 解决：APP端处理WebView视图当键盘弹起时,APP把webview的高度挤压,让输入框自动适应可视区➢ TipsH5在兼容和适配上有一定的局限性,特别是APP混合开发转载于:https://juejin.im/post/5c2fe66ae51d45...

js解决软键盘遮挡输入框的问题分享

11-29

弹出软键盘时： ios端$(‘body’).scrollTop()会改变 android端$(window).height()会改变拉起键盘不是一瞬间，而是有一个缓动过程问题重现 ios端，经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的...

键盘遮挡输入框 界面多个输入框

05-13

界面多个输入框，软键盘遮挡输入框。底部菜单弹出！

Android-键盘挡住输入框终极解决办法

08-13

在Android应用开发中，经常会遇到一个问题，即当用户在EditText中输入时，软键盘弹出后会遮挡到输入框，影响用户体验。标题"Android-键盘挡住输入框终极解决办法"正是针对这一常见问题，而描述中的“终极解决办法”...

输入框被虚拟键盘挡住问题

Object_prototype的博客

01-18

961

输入框被虚拟键盘挡住问题 1.问题所在，但虚拟输入法弹出是把输入框挡住了解决方法一：使用方法api： scrollIntoView 说明：让元素跳到页面可视区去元素.scrollIntoView() document.querySelector('.chunk').scrollIntoView() 传值：两种： 1.boolean true和false 意思: 元素跳顶部和底部 2.object { block: start和end, behavior: s

android全屏或沉浸式状态栏下输入框（EditText）被键盘遮挡软键盘遮挡输入框问题的解决方法,

wangqing830414的专栏

08-29

2138

【代码】android全屏或沉浸式状态栏下输入框（EditText）被键盘遮挡软键盘遮挡输入框问题的解决方法,

解决登录界面软键盘遮挡按钮问题示例

苑亚欣的博客

06-29

602

适用场景：在登录界面，软键盘遮挡按钮的问题。

Delphi D10.3 LayoutsPro 控件简介 -避免输入焦点被虚拟键盘遮挡

tanqth的专栏

01-20

1万+

扩展布局控件，具有TVertScrollBox所有功能（直接继承于TVertScrollBox），增加自动处理该控件内焦点不被虚拟键盘遮挡功能。 (在某些情况下，MEMO不能滚动到指定行)

解决在软键盘弹出的时候挤压或者遮盖原有的布局

热门推荐

小金子的专栏

07-18

1万+

首先来看一下两种情况,对用户来说体验真是不好第一种:试图被遮盖,用户看不到输入的框框第二种情况:试图整个被往上挤压,导致博主上面的标题栏被顶上去了这两种站在用户的角度上都是不好的,所以给出一种方案思路:获取到键盘弹出的时候的高度,然后让部分试图移动一下下,为什么说部分试图呢？因为就像博主这里的标题栏博主就不希望他有所改变,下面是实现的效果图键盘弹出的时候

彻底搞定Android开发中软键盘的常见问题

weixin_34357887的博客

06-02

867

软键盘显示的原理软件盘的本质是什么？软键盘其实是一个Dialog。 InputMethodService为我们的输入法创建了一个Dialog，并且将该Dialog的Window的某些参数（如Gravity）进行了设置，使之能够在底部或者全屏显示。当我们点击输入框时，系统对活动主窗口进行调整，从而为输入法腾出相应的空间，然后将该Dialog显示在...

uniapp软键盘上移盖住内容了

04-23

### uni-app 中软键盘弹出盖住内容的解决方案在开发过程中，当遇到软键盘弹出时可能会覆盖页面中的某些重要部分，尤其是输入框或其他交互组件。针对此问题，可以通过调整页面布局以及监听事件来动态改变样式，从而避免软键盘遮挡内容。 #### 方法一：通过 `fixed` 定位解决可以将底部输入框设置为固定的定位方式，并利用输入框的 `@focus` 和 `@blur` 事件分别获取和释放键盘的高度。具体实现如下： ```html <template> <view class="container">  <view class="header">Header</view>  <scroll-view class="content" scroll-y :style="{ height: contentHeight }"> Content Area... </scroll-view>  <view class="input-container" :style="{ bottom: inputBottom + 'px' }"> <input @focus="onFocus" @blur="onBlur" placeholder="请输入..." /> </view> </view> </template> <script> export default { data() { return { inputBottom: 0, // 输入框距离底部的距离 contentHeight: 'calc(100vh - 50px)' // 动态计算内容区高度 }; }, methods: { onFocus(event) { const keyboardHeight = event.detail.height || 300; // 获取键盘高度，默认值防止报错 this.inputBottom = keyboardHeight; this.contentHeight = `calc(100vh - ${keyboardHeight + 50}px)`; // 更新内容区高度 }, onBlur() { this.inputBottom = 0; this.contentHeight = 'calc(100vh - 50px)'; } } }; </script> <style> .container { display: flex; flex-direction: column; height: 100vh; } .header { height: 50px; background-color: #f0f0f0; } .content { flex-grow: 1; overflow-y: auto; } .input-container { position: fixed; width: 100%; bottom: 0; padding: 10px; box-sizing: border-box; } </style> ``` 这种方法的核心在于动态修改输入框的位置和内容区域的高度[^2]。 --- #### 方法二：使用条件编译与平台特性适配由于不同平台（如 App、H5 和小程序）对于软键盘的支持存在差异，因此可以借助 uni-app 的条件编译功能进行差异化处理。例如，在小程序中可能无法直接获取键盘高度，则需采用其他策略。 ##### 小程序下的特殊处理在小程序环境下，可通过 `wx.getSystemInfoSync()` 接口获取设备屏幕信息，并结合页面滚动逻辑优化体验。以下是示例代码片段： ```javascript // 在 onReady 生命周期中初始化 onReady() { const systemInfo = wx.getSystemInfoSync(); this.systemInfo = systemInfo; }, methods: { onFocus(e) { if (this.isMiniprogram()) { // 判断当前环境是否为小程序 const windowHeight = this.systemInfo.windowHeight; const scrollTop = e.detail.scrollTop || 0; this.$nextTick(() => { wx.pageScrollTo({ scrollTop, duration: 0 }); }); } }, isMiniprogram() { return process.env.VUE_APP_PLATFORM === 'mp-weixin'; } } ``` 此处需要注意的是，小程序本身并不支持像 H5 那样精确捕获键盘高度，所以更多依赖于页面滚动位置的调整[^1]。 --- #### 方法三：全局配置与插件辅助除了手动编写逻辑外，还可以引入第三方库或者框架自带的功能简化操作。例如，uni-app 提供了一个名为 `uni-keyboard-input` 的插件，能够自动完成上述大部分工作流程。安装后只需按照文档说明绑定对应属性即可生效。 --- ### 总结综上所述，解决 Uni-app 软键盘弹出盖住内容的问题可以从以下几个方面入手： 1. 使用 CSS 的 `position: fixed` 结合事件监听器实时更新 DOM 样式； 2. 借助条件编译技术根据不同运行环境制定专属方案； 3. 引入成熟的开源工具减少重复劳动量。最终选择哪种方式取决于实际项目需求和技术栈偏好。