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

最新推荐文章于 2021-09-18 11:16:41 发布

Jian丨兔子

最新推荐文章于 2021-09-18 11:16:41 发布

阅读量267

点赞数

分类专栏：记录文章标签：前端 angular

本文链接：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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jian丨兔子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

IONIC键盘弹出防止页面Header（title位置）自动上移位置（消失）

天外野草技术专栏

09-05

9716

近两年由于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

5381

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

4414

关于移动端软键盘弹出-页面上移测试提了一个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

315

最近项目中用到了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

2521

最近用 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

ionic3开发系列——Android 端软键盘弹出后界面被压缩的解决办法

Crazy_LinkFern的博客

11-24

3319

问题：在页面上点击需要输入的控件，当软键盘弹出后，Android 端的 tabs 移到了软键盘的上面，整个界面都被压扁了。解决方法：打开 AndroidManifest.xml，发现 Ionic 3 将 android:windowSoftInputMode 属性默认设置为 adjustResize 值，将属性值修改为 adjustPan|stateHidden 即可。

键盘弹起布局上移的问题

mousestill的博客

12-26

3018

adjustResizes设置了这个属性，布局弹出依然有问题的解决办法。

解决移动端小键盘弹出页面布局变形问题

iocncc的博客

06-10

412

先在最外层设定样式 min-height: 100vh; /*最小高度*/ overflow: hidden; /*这里不写可能会导致底部出现白边或滚动条*/ 在下一层的元素上绑定动态的style，设置设置动态的高度 ` mounted() { this.bodyHeight = document.documentElement.offsetHeight + 'px'; //注意：这里动态计算页面高度 }, ` ...

ionic vue 让input不弹出键盘