ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

ios 微信键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

问题：测试发现ios微信端浏览器中，键盘弹出后，输入框被软键盘遮挡，input失焦后，因软键盘顶起的页面没有回弹到原来位置，需手动滑动一下页面才可以恢复；android端没有发现这个问题

原因：ios对fixed支持并不是很好，ios12+，微信6.7.4版本存在bug,键盘收回时,界面没有恢复,底下出现空白区域,并导致光标位置错乱,再次点击输入框区域时无法focus

解决方法：监听键盘事件，页面自动滚动到原来位置

直接上代码，直奔主题

 // 软键盘弹起时，解决输入框被遮挡document.body.addEventListener('focusin', (e) =>{var timer1 = setInterval(function() {document.body.scrollTop = document.body.scrollHeight;clearInterval(timer1);}, 100)})// 软键盘消失后，解决页面无法回弹document.body.addEventListener('focusout', (e) =>{var ua = navigator.userAgent.toLowerCase();if(/micromessenger/.test(ua)) {if(/iphone|ipad|ipod/.test(ua)) {var currentPosition, timer2;var speed = 1;timer2 = setInterval(function() {currentPosition=document.documentElement.scrollTop || document.body.scrollTop;currentPosition-=speed;window.scrollTo(0,currentPosition);currentPosition+=speed;window.scrollTo(0,currentPosition);clearInterval(timer2);}, 1);}}})

亲测，苹果x，ios12，完美解决问题，欢迎讨论留言！

ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案相关推荐

android 输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置
本文章重点谈下如何实现,结合以下demo,来谈谈输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置 1.先看下demo的场景,这是个登录界面,因为界面元素比较多,导致在输入法弹出时,下面的登 ...
flutter APP中禁止软键盘弹出，监听硬键盘输入方法
flutter App中禁止软键盘弹出,监听硬键盘输入的方法之前的工作中遇到一个需求,想点击输入框后不弹出软键盘,使用设备硬键盘输入,解决方法:设置输入框只读并且显示光标,然后配置键盘监听就可以了. ...
uniapp 解决ios软键盘弹出input框被遮住或光标不在input框内
因为苹果和安卓底层的开发框架不一样所以软键盘弹出时苹果系统会出现这些问题 uniapp官方也没有给出明确的解决方案这个写法是自己谷歌社区查找并加以实验得出的解决方案 <view cla ...
H5软键盘弹出挡住输入框解决
winResize() function winResize() {// var oHeight=$(window).height();$(window).resize(function () { / ...
（小技巧）h5 手机键盘弹出收起的处理
本文转载于思否社区专栏:随笔作者:hzzly 前言:前段时间也是应项目的需求开始了 h5 移动端的折腾之旅,在目前中台的基础上扩展了两个 ToC 移动端项目,下面就是在 h5 移动端表单页面键盘弹出 ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...
Android完美检测键盘弹出/收起
代码很简单,可以直接复制粘贴. 代码如下: private void setListenerToRootView() {final View rootView = getWindow().getDec ...
Android11键盘弹出动画,(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后留白问题...
问题概述问题1:H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来- fixed属性失效了!满屏任性横飞, 如下图: 问题2:有几后来含些在到气时按式近篇来又的方浏消 ...
成品app直播源码，iOS键盘弹出遮挡输入框
成品app直播源码,iOS键盘弹出遮挡输入框解决的相关代码 self.phoneInput = [UITextField new];self.phoneInput.placeholder = @&qu ...

ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

ios 微信键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案相关推荐

最新文章

热门文章

ios 键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案

ios 微信键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案

ios 键盘弹出input输入框被遮挡 键盘隐藏时页面无法回弹解决方案相关推荐

最新文章

热门文章

ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

ios 微信键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案

ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案相关推荐