怎样通过focusout事件解决IOS键盘收起时界面不归位的问题

这篇文章主要介绍了怎样通过focusout事件解决IOS键盘收起时界面不归位的问题，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联公司专注于绥棱网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供绥棱营销型网站建设，绥棱网站制作、绥棱网页设计、绥棱网站官网定制、小程序开发服务，打造绥棱网络公司原创品牌,更为您提供绥棱网站排名全网营销落地服务。

页面结构

出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的结构，用于用户填写邮寄信息。类似：

截图如下：

键盘弹起时页面自动上移

当用户在手机上输入联系电话时，iPhone键盘会弹出，此时iPhone上为了让用户可以看到电话输入框，会将整个页面整体向上移动（不然键盘会遮住电话输入框）。此时，实际上页面顶部是离开了我们的视口一部分距离的（我们看到界面中消失了一行输入框）。

键盘收起时页面无法还原归位

然而当用户输入完成关闭键盘后，键盘虽然收起了，但页面位置却不会还原。

问题分析

实际上这是由于 IOS 无法在键盘收起时，页面滚出视口的部分没有掉下来导致的。这时用户是可以通过手指将页面拖回来的。

但是毕竟体验不好。

要解决这个问题，我们可以在用户光标离开输入框的时候，调用 window.scrollTo(0, 0) 来把页面滚动到跟视口顶部对齐，从而实现页面归位的效果。

那么现在问题就是要给表单中 4 个输入框全部加上 blur 事件，然后在 handler 中调用 window.scrollTo。不过，无论是通过 Vue 的 @blur 还是通过 DOM 操作的方式添加，都要添加4个事件监听，不是很优雅。很自然，我们想到用事件代理。

事件代理

即，我们把事件监听放到顶部元素上；然后定义一个 inputBlur 的函数等待触发。