解决IOS中input失焦后,页面上移,点击不了问题

IOS在Input失焦后,发现body的页面会停止不下来,并且页面上的输入框,按钮点击事件,全部都移位了,需要滑动一下才可以正常。

下面是解决方法,可全局引用:
var u = navigator.userAgent;
  var flag;
  var myFunction;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    document.body.addEventListener(‘focusin‘, () => {  //软键盘弹起事件
      flag = true;
      clearTimeout(myFunction);
    })
    document.body.addEventListener(‘focusout‘, () => { //软键盘关闭事件
      flag = false;
      if (!flag) {
        myFunction = setTimeout(function () {
          window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)

        }, 200);
      } else {
        return
      }
    })
  } else {
    return
  }引自:https://www.javascriptcn.com/read-52084.html

原文地址:https://www.cnblogs.com/wr20190131/p/10855873.html

时间: 2024-08-01 19:07:03

解决IOS中input失焦后,页面上移,点击不了问题的相关文章

fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastclick可以使用npm,Component和Bower.另外也提供了Ruby版的gem fastclick-rails以及.NET提供了NuGet package. npm install fastclick import   FastClick   from 'fastclick'; Vue.us

iOS中绑定tableview后,变量值消失的问题

好吧,标题就以最通俗的语句命名,估计百度收录的时候,大家查找的时候会更加的方便. iOS新手,这个问题着实调试了好长时间! 由于上手就开始做大的项目,也没时间从基础做起,相信大多数小公司的开发者都是这种模式.因此很多问题都产生自很基础的错误. 项目使用mvc结构,在异步读取完数据后,NSArray中model的数据就丢失了,专业点就是内存释放了,只剩下内存地址了. 可能大家的情况和我不同,所以解决方法也不一定相同. 项目服务端是asp.net webservice,使用AFNetworking读

解决iOS下input和fixed 问题

在ios下如果页面底部有fixed 元素当有input输入框触发键盘时fixed会浮动在页面出现展示总是 解决方法有很多种,但是要根据实际需要更改 方法一.css解决(弊端:当有大面积input元素时会出现滑动不顺畅问题) //这里给内容区域设置 position:absolute,并且设置一个距离fixed的底部距离 .main{ position:absolute; bottom:rem-calc(80px); //fixed元素的高度 top:0; left:0; width:100%;

IOS中input键盘事件keyup 的兼容解决办法

用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件去代替keyup. eg: var bind_name = 'input';if (navigator.userAgent.indexOf("MSIE") != -1) { bind_name = 'propertychange';}(此处是为了兼容IE)if(navigator.user

IOS中input光标跑偏问题的解决方法

ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子添加了height和line-height 当点击输入的时候,光标的高度就自动和父盒子的高度一样了.(谷歌浏览器的设计原则,还有一种可能就 是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字 的底部). 解决办法:去掉父盒子的高度heig

移动端登录页面input获取焦点后页面布局及输入框上移的问题

最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, 软键盘调出后,输入框整体都被挤到了页面上方,内容覆盖了logo,页面瞬间low毙. 然后各种改,把上移的那部分固定定位.js各种控制高度,然鹅都没有很好的起作用.经过各种度娘和尝试,终于恢复正常 终于是整个页面背景上移,而不仅仅是内容上移了.贴代码,重点都在标记部分 问题解决,so easy,希望

解决CSS中float:left后需要clear:both清空

现在,大部分的横排导航都是通过 ul -> li *n -> a 来实现的.具我所知,要达到这种效果,有几种方法可以实现. 1.传统处理方式: li {float:left;}/*这样,对固定宽度导航条来说,li不能自动居中*/ 2.inline-block方式 ul {text-align:center;font-family:simsun;font-size:14px;} li {display:inline-block;*display:inline;zoom:1;margin-righ

解决虚拟机中克隆linux后系统无法上网的问题。

本人近期学习LINUX,想克隆多台CENTOS来练习在LINUX下安装软件,配置环境.因为对系统不是很熟悉,就想保持一个纯净版本,如果系统玩坏了就删除再重新克隆一个继续配置,以节省时间.后来发现,克隆出来的系统无法上网,在网上找了一下解决办法.总结如下: 感觉是克隆的原因,会将原母机器的网卡信息保存下来为eth0,而新机器启动会产发现自己的网卡信息,生成eth1.然而机器的其他网络配置还是没变,所以不会将eth1启动,而eth0又没有发现,具体会提示由于MAC地址错误而所以无法上网. 我们要做的

[已解决]springBoot 中添加 dev-tools后,运行程序报错Unenhance strategy

发生条件:在pom.xml中增加dev-tools的依赖,程序启动后,调用程序接口报错 问题现象: ------------------------------------------------------------- Registered concrete types: 5 (approximate size: 630.7 kB) [interface java.util.Collection] : ArrayList<Object> [interface java.util.Map]