IOS手机,输入失去焦点,但是不回弹的问题解决

### IOS手机,输入失去焦点,但是不回弹的问题解决

#### 1. 问题描述
在IOS 10+的某一版本系统里,当输入框聚焦之后,整个页面会向上推动,而当你点击收起键盘时,上推的页面没有自动弹回(需要手动触摸一次页面才会弹回);

如果只是纯UI的位置变动,其实还可以接受的,但是如果此时页面上是有绝对定位的元素,这个元素内部的点击区域,也会跟着产生偏移,就会导致定位的元素内部的点击元素,点击失效;

#### 2. 直接看demo
因为这个我个人认为是IOS系统的BUG,所以这里也就不做更详细深入的讨论其原理,只是给出一个解决方案,直接就可以从demo开始看起吧;

1:[常规文档流 – 页面无滚动](http://www.zhangyunling.com/study/2019/20190408/index-1.html)

2:[常规文档流 – 页面有滚动](http://www.zhangyunling.com/study/2019/20190408/index-2.html)

3:[定位元素 – 页面无滚动](http://www.zhangyunling.com/study/2019/20190408/index-3.html)

4:[定位元素 – 页面无滚动 – 弹窗内有滚动](http://www.zhangyunling.com/study/2019/20190408/index-4.html)

5:[定位元素 – 页面有滚动 – 弹窗内有滚动](http://www.zhangyunling.com/study/2019/20190408/index-5.html)

在上面的每个demo里,都提供了两个`input`输入框,经过处理和没有经过处理的,你可以这样测试一下:在定位的元素内部(示例,3,4,5),你先让未经过处理的输入框聚焦,然后关闭键盘,再去点击未处理的输入框,看看是否会出现聚焦失败的情况;

处理的方式,其实很简单,只需要在focus的时候,记录一下页面的滚动位置,在blur的时候,进行一次`窗体`移动即可(注意这里是`窗体`),看代码:

“`
var input=document.getElementById(“input”),
v=0;

input.addEventListener(“focus”,function(){
v=window.pageYOffset;
},false);
input.addEventListener(“blur”,function(){
window.scrollTo(0,v)
},false)
“`

本文地址:http://www.zhangyunling.com/?p=907

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>