解决安卓原生键盘遮挡输入框问题

已于 2022-11-05 22:13:29 修改
阅读量1.2k 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2022-11-05 21:55:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46340177/article/details/127709757
版权

最近在整理之前项目遇到的Bug，整理到一个经常容易遇到的问题：输入框比如短信验证码的输入框点击发送短信时苹果手机弹出的系统键盘会使屏幕弹起，从而不会遮挡输入，但是安卓手机不会。

解决方式：通过navigator.userAgent判断一下是否是安卓，如果是，则render中渲染时底部条件空白div或者回车。

键盘弹起，输入框出现在可视区域内（对于这点，ios本身是支持的，但是安卓却不会主动让输入框出现在可视区域内）

这个简单，让元素滚动到可视区域内，直接用element.scrollIntoView(true)方法就好

完美解决！

小艺喵喵酱
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）
12-12
本文介绍了React-Native键盘遮挡问题，分享给大家 在开发中经常遇到需要输入的地方，RN给我们提过的TextInput虽然好用，可惜并没有处理遮挡问题。 很多时候键盘弹出来都会遮挡住编辑框，让人很头疼。 本来想在js.coach 库里面找一找第三方的插件，看到最好的一个就是React-native-keyboard-spacer了，然而我们还差一个东西，那就是获取键盘的高度。 这个我也查了半天并没有提供，获取没找到吧。于是只好自己写原生模块去获取键盘的高度了。 关于原生iOS获取键盘高度我就不多说了，网上一大堆，我直接贴上我的代码，自己根据RN写的原生模块： // // Keyboa
Android软键盘遮挡的四种解决方案
weixin_34289744的博客
12-31 548
目录： 一、问题概述 二、简单解决方案 三、代码可控性方法 　　1、主页面布局文件 　　2、自定义LinearLayoutView 　　3、主界面MainActivity 四、实现效果 一、问题概述 ...
android 键盘遮挡输入框问题回忆
shi450561200的博客
03-05 719
刚开始做Android的时候，有一次遇到输入框位于页面底部，弹出的键盘老师遮挡输入框，这就给人一种感觉----不咋舒服。当时，网上百度了一遍，后面终于解决了，由于当时天天加班，没时间写博客，现在把他放出出来，也是总结下多年前的技术。解决方案有以下几种。
Android输入面板被键盘遮挡的解决办法
nanjumufeng的博客
11-09 2293
在Android开发中，有一些非常不优化的体验，比如输入面板会被软键盘遮盖的问题。如下图。上图是被软键盘遮盖的原图上图是软键盘这个的效果上图是解决之后的效果图。
android有多个输入框,Android中几种解决键盘挡住输入框的办法与原理
weixin_39639381的博客
05-26 596
在Android开发中，经常会遇到键盘挡住输入框的情况，比如登录界面或注册界面，弹出的软键盘把登录或注册按钮挡住了，用户必须把软键盘收起，才能点击相应按钮，这样的用户体验非常不好。像微信则直接把登录按钮做在输入框的上面，但有很多情况下，这经常满足不了需求。同时如果输入框特别多的情况下，点击输入时，当前输入框没被挡住，但是当前输入框下面的输入框却无法获取焦点，必须先把键盘收起，再去获取下面输入框焦点...
安卓弹出软键盘遮挡输入框解决方法
qq_33462950的博客
09-14 440
这个会使输入法在屏幕下方弹出，不会压缩布局，但会遮挡下方布局。在manifest 配置文件中的Activity里加入。在manifest 配置文件中的Activity里加入。会压缩布局导致变形，但不会遮挡下方的布局。
5种方法完美解决android软键盘挡住输入框方法详解
weixin_38193813的博客
09-30 7170
版权声明：本文为CSDN博主「潇潇凤儿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/smileiam/article/details/69055963 在开发中，经常会遇到键盘挡住输入框的情况，比如登录界面或注册界面，弹出的软键盘把登录或注册按钮挡住了，用户必须把软键盘收起，才能点击相应按钮，这样的...
手机网页，输入时 软键盘盖住输入框完整解决方案，兼容安卓、鸿蒙、苹果IOS
橙-极纪元-cplvfx-JJY.Cheng
09-08 3467
手机网页，输入时 软键盘盖住输入框完整解决方案，兼容安卓、鸿蒙、苹果IOS
原生js实现键盘控制div移动且解决停顿问题
10-20
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
原生输入框弹框.pdf
12-30
最近做搜索框时发现，ios点击输入框之后，点击软键盘上的 完成 时发现，轻击input就无法唤起软键盘，无法对输入框聚焦，必须长按或重压才行，这边经过测试，发现应该是fastclick.js 引起的冲突，ios11 后修复了移动...
基于Android的安卓TV原生Webview打包设计源码
04-08
安卓TV原生Webview打包 - 基于Android开发，包含55个文件，如PNG、XML、JAVA、GITIGNORE、GRADLE、APK、PROPERTIES、SER和LICENSE等。该项目提供了一个安卓TV原生Webview打包的解决方案，通过Java语言实现，为用户...
关于vue 结合原生js 解决echarts resize问题
10-15
主要介绍了关于vue 结合原生js 解决echarts resize问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android 输入框底部被软键盘遮挡或被完全遮挡解决方式
云卷云舒i的博客
03-29 1068
Android 输入框底部被软键盘遮挡或被完全遮挡解决方式
Android 软键盘遮挡界面问题汇总
qq_22255311的博客
03-10 1530
Android输入框软键盘遮挡问题，通常有以下三种情况： 在无WebView的界面下： 按需求配置`android:windowSoftInputMode`，为`adjustPan`或`adjustResize`。 - **有WebView的界面下：** 非全屏模式： 配置`android:windowSoftInputMode`为`adjustResize`。 全屏模式： 项目新增一个`AndroidBug5497Workaround`类，完美解决。
android全屏或沉浸式状态栏下输入框（EditText）被键盘遮挡软键盘遮挡输入框问题的解决方法,
wangqing830414的专栏
08-29 1822
【代码】android全屏或沉浸式状态栏下输入框（EditText）被键盘遮挡软键盘遮挡输入框问题的解决方法,
安卓全屏或沉浸式状态栏下输入框（EditText）被键盘遮挡解决方法
forzhers的博客
05-24 718
用去除状态栏的主题如：Theme.AppCompat.Light.NoActionBar这种就会出现editText被遮挡的现象。解决方法：activity onCreate（）方法中设置。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 185
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）
05-31
1. 使用Android原生方法：在Android WebView中，可以使用WebViewClient的onPageFinished()回调方法监听H5页面加载完成后，通过JavaScript注入方法，调用Android原生方法解决输入框被键盘遮挡的问题。具体代码如下： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值