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

问题症状

创新互联的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站设计、成都网站建设、电商网站开发、微信营销、系统平台开发。

今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状：

页面结构

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

截图如下：

键盘弹起时页面自动上移

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

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

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

问题分析

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

但是毕竟体验不好。

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

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

事件代理

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

结果，发现我们的事件监听器无法触发。原因经查是输入框的 blur 事件无法冒泡。

经过查询，发现 focus 和 blur 两个 DOM 事件在规范中就是无法冒泡的。而与之相类似的有另外 2 个事件 focusin 和 focusout 则是可以冒泡的。

网上一些文章提到 focusin 和 focusout 是 IE 浏览器才支持的一种 DOM 事件。而实际上我们看 MDN 文档发现，这两个事件已经成为 DOM 3 规范的一个标准，而且可支持的浏览器数量并不少。

inputBlur(e) {
// 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
window.scrollTo(0,0);
}
},

inputBlur(e) {
// 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
// 输入框失去焦点，要把IOS键盘推出页面的滚动部分还原。即将页面滚动到视窗顶部对齐
console.log('设置timer')
this.timer = setTimeout(() => {
console.log('timer触发')
window.scrollTo(0,0);
}, 0)
}
},
inputFocus(e) {
// 如果focus，则移除上一个输入框的timer
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
clearTimeout(this.timer);
}
}