ionic键盘弹出导致界面点击偏移

最新推荐文章于 2021-09-18 11:16:41 发布
最新推荐文章于 2021-09-18 11:16:41 发布
阅读量267 收藏
点赞数
分类专栏： 记录 文章标签： 前端 angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zane_626/article/details/106317062
版权
本文记录了在iOS端使用Ionic时，键盘弹出导致界面点击位置出现偏移的问题及其解决方案。问题源于body定位问题，通过为输入框添加失去焦点事件并在事件中使界面回滚，成功解决了此问题。
摘要由CSDN通过智能技术生成

ionic键盘弹出导致界面点击偏移

在iOS端键盘弹出,整体界面向上偏移,点击空白区域键盘隐藏后,整体界面复原,但是点击时发现偏移 虽然界面看起来复原但是点击时元素的位置还是在键盘弹出时的位置.加了好多ionic的群去找解决方法,最终在大佬指点的情况下解决了此问题,以此记录下问题所在,怕以后忘记.

原因

可能是因为body的定位问题

解决办法

给输入框添加失去焦点事件,在事件里将界面重新滚动回去

ionic3+angular4
<input type="text" (blur)="scrollToTop()">
最低0.47元/天 解锁文章
Jian丨兔子
关注
专栏目录
IONIC键盘弹出防止页面Header（title位置）自动上移位置（消失）
天外野草技术专栏
09-05 9715
近两年由于html5技术的普及，混合类应用在移动市场占据了大量的份额，但是如果想用html5技术达到native的效果，还需要一点努力的。比如在混合应用中，当页面空间不是很足的时候，点击输入框弹出键盘，header会自动向上移动，直到消失，此效果只发生在ios上，那我们应该如何解决呢？我再项目中应用到了ionic，就以ionic为例，说一下我的解决方案。安装插件cordova plugin add
IONIC键盘弹出时，页面自动上移，导致上部元素不能显示的解决方法
iteye_21103的博客
01-12 2262
原文出处：http://blog.csdn.net/jiangbo_phd/article/details/52438418，感谢作者的分享。 keyboard 该问题只出现在IOS中。   在Android 和 iOS中, Ionic会试图阻止键盘的模糊输入以及聚焦元素，任何可以获取焦点的元素必须在一个滚动视图或一个类似于带有滚动视图的Content指令内。 在获取焦点时，它会试图阻...
ionic3 footer上添加输入框，弹出键盘时，整个页面全部上移问题
strong90的博客
01-24 5380
Solution with changing ion-input to input doesn't work for me (ionic beta 11). My workaround, in app.ts, constructor, platform is ready: if (platform.is('ios')) { let appEl = (document.g
完美处理弹出键盘，界面上移功能
tangaowen的专栏
10-18 5319
1.   定义   int          m_curKeyboardHeight;      在init函数中  设置为 m_curKeyboardHeight =0;    2. 在init中  注册两个通知              [[NSNotificationCenter defaultCenter] addObserver:
ionic4 做webapp ios下 input 等输入框 键盘弹起在收回 焦点错位问题 (赞、实用）
chelen_jak的专栏
09-18 282
原文出处：ionic4 做webapp ios下 input 等输入框 键盘弹起在收回 焦点错位问题_黄正梦的博客-CSDN博客1. 用ion-input ion-textarea的情况下<ion-input (ionBlur)="onBlur()"></ion-input>onBlur() { if (this.platform.is('ios')) { // 处理微信浏览器ios输入框关闭时，无法正确缩回 true 顶部对齐 false 底部对齐 ...https://blog.
ionic开发中点击input时键盘自动弹出
08-31
在使用Ionic进行移动端应用开发时，常常会遇到一个问题：当用户点击输入框(input)时，弹出的虚拟键盘会遮挡部分屏幕内容，尤其是输入框附近的元素，如顶部标题或底部按钮。为了解决这个问题，我们可以采取一些策略来...
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
09-01
在使用Ionic框架开发iOS系统下的微信应用时，经常会遇到一个问题：当用户在输入框中输入内容，软键盘弹出后会遮挡输入框，导致用户体验不佳。这个问题在描述中被称为"键盘挡住输入框"的问题。解决这个问题对于提供...
关于移动端软键盘弹出-页面上移
weixin_44204144的博客
08-19 4388
关于移动端软键盘弹出-页面上移 测试提了一个bug，说的是除了iphone6 7 7puls不兼容收不到验证码，其他Android和ios都是ok的，才发现原来是软键盘弹出以后导致页面上移导致页面塌陷了。在iphone7测试的时候，只要软键盘一弹出，输完电话号码以后，关闭软键盘，怎么点击获取验证码都直接出了一个注册按钮的点击事件，话不多说，直接上图。 只要我输完电话号码，关闭软键盘，随便我怎么点击都是直接弹出“请输入验证码”，这个是弹窗是注册按钮的点击事件，都是因为页面上移导致页面塌陷了。我还在纳闷为什么
ionic 2.x 3.x input触发调用键盘搜索及事件
weixin_30653097的博客
09-07 110
html (1、input type='search' 2、将input套在一个带action的form中 ) <form action=""> <ion-input type="search" placeholder="请输入搜索关键字" (keypress)='test($event)'></ion-input> </...
解决 ionic 自定义弹出窗口 配置指定div可以滑动
u012381782的博客
11-19 314
最近项目中用到了modal弹窗但是弹出的modal数据量比较大的时候无法滑动解决办法如下: 代码如下: .mybicon-modal { background: 0 0; width: 100%; overflow-y: scroll !important; height: 90%; margin-top: 10%; position: relative; display: flex; } ...
移动端软键盘弹出时文本输入框下沉、获取焦点并弹出软键盘
weixin_34336526的博客
07-26 196
## 文本输入框容易下沉因为软键盘弹出时是一个动画 ## //方法：利用滚动条，弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过0.5秒设置一次， //这个是因为软键盘还没有完全弹出滚动条已经到此时的底部了，等软键盘完全弹出后就遮住了输入框（需要再次设置滚动条）。 let interval; //消息框获取焦点 docum...
点击输入框，input不断变高
zengshaotao的专栏
05-02 727
chrome浏览器，table，tr，td的原始排版模式。   一个奇怪的问题来了，页面初始化的布局是正常的，但是点击输入框时， 输入框的高度越来越高。   经代码察验，   一共就2行，即2个tr，但是在第二行的td里设置了rowspan=2， 也就是，占用了多余的空间。 chrome在每次点击input时都会有边框特效 所以估计会动态更新页面的dom对象，所以问题就产生了...
锁定页面+Fixed + Input 调用键盘的时候位置偏移之小技巧
weixin_37335895的博客
12-05 621
##      问题描述：       最近在写移动端一个表单验证。用于要禁止下拉出现微信或者app浏览器显示默认信息。使用了fixed锁定页面，但是，但是在iOS下，input得到焦点调起键盘输入之后 ，页面input元素位置发生偏移。导致内容输入会出现问题+页面卡顿。最开始想到blur时，改变position值为fixed,focus为static；然鹅，不管用哇。。。            ...
手机软键盘弹起导致页面变形的一种解决方案
分享我的编程经验和学习心得
04-23 2517
最近用 uniapp（一种第三方app开发框架） 开发 app，其中有一个页面有十几个 input 输入框，在点击 input 输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，布局全被打乱。 原来长这样： 变形后长这样： 在开发APP时 ...
汇总ionic 安卓底部tabs footer-bar 被键盘弹起解决方法
m0_37829185的博客
08-14 1637
1.在app.js中配置tabs默认位置 $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $ionicConfigProvider.platform.android.tabs.styl
键盘弹起布局上移的问题
mousestill的博客
12-26 3017
adjustResizes设置了这个属性，布局弹出依然有问题的解决办法。
ionic3开发系列——Android 端软键盘弹出后界面被压缩的解决办法
Crazy_LinkFern的博客
11-24 3319
问题： 在页面上点击需要输入的控件，当软键盘弹出后，Android 端的 tabs 移到了软键盘的上面，整个界面都被压扁了。 解决方法： 打开 AndroidManifest.xml，发现 Ionic 3 将 android:windowSoftInputMode 属性默认设置为 adjustResize 值，将属性值修改为 adjustPan|stateHidden 即可。
解决移动端小键盘弹出页面布局变形问题
iocncc的博客
06-10 411
先在最外层设定样式 min-height: 100vh; /*最小高度*/ overflow: hidden; /*这里不写可能会导致底部出现白边或滚动条*/ 在下一层的元素上绑定动态的style，设置设置动态的高度 ` mounted() { this.bodyHeight = document.documentElement.offsetHeight + 'px'; //注意：这里动态计算页面高度 }, ` ...
ionic vue 让input不弹出键盘
最新发布
05-12
另外，你也可以将 `type` 属性设置为 `text` 来避免弹出数字键盘或其他特殊键盘。 例如： ``` <ion-input readonly type="text"></ion-input> ``` 如果你需要在某些条件下启用输入框的输入功能，你可以使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值