移动Web开发--Android自带浏览器弹软键盘触发resize事件问题

最新推荐文章于 2024-01-24 16:59:00 发布
最新推荐文章于 2024-01-24 16:59:00 发布
阅读量4.4k 收藏
点赞数
分类专栏： 移动Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanjunspirit/article/details/9347021
版权

在移动Web页面中，resize事件的触发逻辑兼容性问题比较大，建议使用时谨慎些。


在一些安卓自带浏览器中，软键盘的弹出会被浏览器认为是页面尺寸改变并触发resize事件。

如果监测了resize事件并做了页面尺寸的改变，可能会出现盖住输入框，或者在部分android 2手机上面输入时页面上下跳的诡异现象。

 

结论：

1. 监测手机方向改变优先使用onorientationchange，可以用'onorientationchange' in window判断下，如果不存在再使用resize事件

2. 谨慎使用resize事件

junhan-韩俊
关注
专栏目录
js解决移动端在iOS和android 监听软键盘弹起、收起
前端程序员、项目经理、人工智能博主
10-31 4663
1.在ios中软键盘弹起时，仅会引起$(‘body’).scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦； 2.在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；......
android中的activity布局内含有webview,弹出软键盘如何自动适应屏幕，自动调整
BigRookie_nan的博客
09-01 4968
解决方法一： 在所在的Activity中加入 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE|WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 解决方法二： 1.调整AndroidManifest.
安卓端嵌套h5-键盘遮挡h5底部input且不触发onresize
个人博客
07-28 2124
解决方案：安卓端监听键盘主动触发h5方法
安卓软键盘弹出导致window.resize引发的血坑
baidu_41601048的博客
06-23 1090
事故起因： 因为在模拟器上切换不同手机机型时，样式不能立即同步，必须重新刷新一下。所以最开始打算在每次window.resize的时候强制刷新。也就是 resizewin.js ------------------------------------------------------------- window.addEventListener("resize",function(){ window.location.reload() }) ----------------...
移动端调起软键盘会执行resize事件问题
程序员超超的博客
08-01 804
最后找到了问题的原因，原来是移动端调起软键盘会执行resize事件，也就是说调起软键盘会执行setRem，经过测试我发现，假如屏幕宽度是375px，那么唤起软键盘之后的屏幕宽度还是375px。下面来描述一下问题场景，初始渲染会执行resize事件外面的那个setRem，例如渲染完毕字体是16px，然后执行缩小字体功能，假如变成了10px，这时我需要搜索一些关键词，当我点击输入框，弹起软键盘的时候，字体又变成了16px，这让我百思不得其解。最近做h5有一个需求，页面的话是展示一篇文章，文字很多。...
解决android 软键盘在全屏下设置adjustResize无效的问题
qq_29427129的博客
06-15 884
全屏模式下，即使将activity的windowSoftInputMode的属性设置为：adjustResize，在键盘显示时它未将Activity的Screen向上推动，所以你Activity的view的根树的尺寸是没有变化的。在这种情况下，你也就无法得知键盘的尺寸，对根view的作相应的推移。全屏下的键盘无法Resize的问题从2.1就已经存在了，直到现在google还未给予解决。有人已经封装
键盘设置resize，webview弹出键盘后不起作用
Super_666的博客
11-05 875
键盘显示设置为resize后，不起作用，尝试了网上各种方法，找到以下两篇可以参考 添加链接描述
android 设置软键盘高度,Android 软键盘一招搞定(实践篇)
weixin_42251888的博客
05-25 2428
前言软键盘是Android进行用户交互的重要途径之一，Android应用开发基本无法避免不使用它。然而官方没有提供一套明确的API来获取诸如：软键盘是否正在展示、软键盘高度等。本篇将着眼如此，探索解决方案。本系列文章：通过本篇文章，你将了解到：1、软键盘开启与关闭2、软键盘界面适配3、软键盘高度获取1、软键盘开启与关闭为方便起见，这里用键盘代替软键盘来说明。平时使用最多的无非就是EditText控...
Android 监听软键盘的高度并解决其覆盖输入框的问题
Lindroid的博客
02-13 4538
1、前言 在某些项目中，我们常常需要自定义一个输入框，软键盘弹出时就把输入框顶上去，关闭时输入框再回到原位（比如下方的效果图，实际上各种 App 中的聊天界面和发布评论的界面大体都是这样）。在这个过程中，除了输入框以外的其他界面的元素不受影响，比如效果图中的背景图片不会上移也不会被压缩。但在实际使用中发现软键盘在弹出时常常把输入框盖住，导致输入框显示不完全。有什么方法可以解决呢？ 2、思路分析 2.1 获取软键盘的高度 网上常见的思路是这样的：在输入框的下面放置一个View，当软键盘弹出时，获取软键盘高度
android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）
weixin_42521949的博客
05-27 6352
问题如图一个表单：在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起(ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域，这里不做讨论)问题分析及解决办法确立最常见的是使用两个方法：scrollIntoViewIfNeeded()、scrollIntoView()，使用方法自行百度。在我这...
解决安卓全屏“FLAG_FULLSCREEN”状态下“adjustResize”失效，全屏状态下WebView的输入框被软键盘挡住的问题
alexL
05-26 6021
沿着这个问题的线索，可以追溯到：  http://code.google.com/p/android/issues/detail?id=5497   ，安卓官方问题帖，这个问题的代号为“5497” ，就这个问题帖的回复来看，困惑了许多人数年之久，问题发布日期“Dec 16, 2009”，现在我在安卓4.4.2环境运行，这个问题依旧存在。在此推荐这其中的一个解决方法，来自：stackov
html focus 唤醒手机键盘,移动端 input 元素 focus 的时候调出键盘（自动触发 focus 事件的同时调出键盘）？...
weixin_32488761的博客
06-09 1047
安卓我目前没有遇到问题。然后直接使用input.focus()是无法在ios中调起键盘的，因为ios中input元素的focus必须由事件触发。此外，如果模拟了触摸事件，但是在setTimeout中延迟执行，也是不行的。这部分可以参考stackoverflow上的case：Mobile Safari Autofocus text field.来自FastClick团队的大牛指出了IOS下input...
移动端安卓机兼容问题 -- 键盘弹起页面被挡
weixin_45442464的博客
06-15 249
在代码中加入如下代码: if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function() { if ( document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA' ) { window.setTimeout(f
触发resize事件
KUIKUI_的博客
07-06 687
resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。
DIV的resize事件不响应的解决办法，解决html 的div或其他元素监听 resize事件不生效的问题
白袍小将的博客
05-12 2774
DIV的resize不响应的解决办法，该办法代码短小精悍，原理简单移动，可以方便复制粘贴。
h5(移动端) 监听软键盘弹起、收起
qq_46302247的博客
03-28 8074
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/article/details/103490964 https://www.cnblogs.com/rachelch/p/12858938.html ** 1、 安卓键盘弹起会触发页面的resize 事件（ios不会），所以可以通过判断页面高度的前后变化来判断键盘的状态。 2、 ios 在键盘收起的时候input 会失去焦
Android全屏状态下弹出输入法adjustResize无效的修复方案及踩坑指南
苦逼程序员的笔记
12-19 6714
Android全屏状态下弹出输入法ajustResize无效的修复方案及踩坑指南 输入框被输入法遮挡的问题相信很多人都遇见过，这次记录的是Activity在全屏FullScreen状态下windowSoftInputMode的ajustResize不生效问题。 下面是WindowManager类关于SOFT_INPUT_ADJUST_RESIZE的官方注释，在FullScreen状态下adjust...
android 自定义软键盘的显示和隐藏
最新发布
qq_37324563的博客
01-24 553
在InputMethodService中有这两个方法可以看到软键盘显示状态。在activity中可以通过这种方法看到软键盘显示状态。// 获取当前布局的可见高度。// 获取屏幕的高度。// 计算键盘的高度。
解决安卓软键盘弹起遮挡输入框的问题
dujyong的博客
12-01 2630
解决安卓软键盘弹起遮挡输入框的问题 在开发微信网页的时候,遇到的问题.调试工具查看效果时并没有问题,打包发布时问题就出现了,安卓机型并没有对光标锁定输入框时,做出让输入框移动到屏幕中间的处理,导致软键盘弹出遮挡住了输入框,然而移动端并没有监听软键盘弹起及收回的事件,所以我们可以监听输入框的点击事件来做出相应的处理. 解决 给输入框绑定点击事件 代码片. @click="isAndroid" 注册...
flutter webview弹起软键盘后页面自动刷新问题
08-31
在使用Flutter的WebView时，当软键盘弹出后页面自动刷新的问题是一个常见的情况。这是因为在WebView中，默认的行为是，在软键盘弹出时，会重新加载页面，以适应键盘的高度变化。 要解决这个问题，有几种方法可以尝试。 1. 在AndroidManifest.xml文件中，为WebView添加以下属性：android:windowSoftInputMode="adjustResize"。这会告诉WebView在软键盘弹出时，调整窗口大小，而不是重新加载页面。 2. 使用Flutter插件webview_flutter。该插件提供了一些额外的配置选项，可以避免页面在软键盘弹出时刷新问题。在使用webview_flutter时，可以尝试设置属性initialMediaPlaybackPolicy为AutoMediaPlaybackPolicy.always_allow，或者设置键盘弹出模式为Resize。 3. 在使用WebView的页面中，监听软键盘的弹出和隐藏事件。当软键盘弹出时，可以尝试通过调整布局的方式，适应键盘的高度变化，而不是重新加载页面。 总之，要解决Flutter WebView弹起软键盘后页面自动刷新的问题，可以尝试在AndroidManifest.xml中设置窗口的软键盘模式、使用webview_flutter插件来配置WebView的行为，或者监听软键盘事件进行自定义处理。根据具体情况，选择适合的方法来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值