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

vvpale 发布于2019-08-02 15:34 / 3261人阅读

摘要：原因经查是输入框的事件无法冒泡。这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。输入框失去焦点，要把键盘推出页面的滚动部分还原。

问题症状

今天在开发一个移动端的 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 规范的一个标准，而且可支持的浏览器数量并不少。

所以，果断通过这两个事件解决问题，我们改成 focusout

然后，实现我们的事件处理器：

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

这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。

但是经过手机测试发现，当我们从 电话输入框 直接切换到 姓名输入框 这种操作时，页面会发生抖动。我们来继续分析。

解决抖动问题

其实2个输入框切换时抖动的原因也很简单。因为我们在上述两个输入框之间切换时，页面会首先触发 电话输入框 的 blur 事件，接着触发 姓名输入框 的 focus 事件。这样的话，在 blur 时会触发我们的 window.scrollTo(0,0) 导致页面往下滚一下，接着 姓名输入框 聚焦，于是键盘继续弹起---这导致页面再次向上移动。

其实，在两个输入框之间切换这种操作时，我们就没必要触发第一个输入框 blur 时的 window.scrollTo 行为了。因此看我们修改下我们的代码，让输入框切换这种操作发生时，可以切断第一个输入框的行为。这里我们用 setTimeout 来解决：

        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);
            }
        }

完

云服务器 GPU云服务器解决TPM不支持问题解析jpeg数据时的问题解决问题的方法键盘事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54215.html

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

摘要：原因经查是输入框的事件无法冒泡。这时，我们问题得到解决了，当从输入框输入内容，然后点击键盘的完成收起键盘，效果符合我们的预期。输入框失去焦点，要把键盘推出页面的滚动部分还原。问题症状今天在开发一个移动端的 H5 页面时，遇到了 IOS 上键盘收起时界面无法归位的问题。下面详细描述下问题和症状：页面结构出问题的页面是一个表单结构。即类似于一个 div 下有4个 input 表单的...

lifesimple 2019-08-26 18:37 评论0 收藏0
ios12中遇到的带input弹窗的错位问题

摘要：问题描述使用定位的弹窗，在的系统里，软键盘调起后，页面整体上移，当软键盘消失时，视觉上页面已经回到原始位置，但其实弹窗的焦点位置仍在软键盘调起时的位置。问题描述：使用fixed定位的弹窗，在ios12的系统里，软键盘调起后，页面整体上移，当软键盘消失时，视觉上页面已经回到原始位置，但其实弹窗的焦点位置仍在软键盘调起时的位置。解决办法：这也是参考某位大佬的解决办法 documen...

henry14 2019-08-26 13:49 评论0 收藏0
vue 手机键盘把底部按钮顶上去

摘要：背景在写提交订单页面时候，底部按钮当我点击输入留言信息的时候，底部提交订单按钮被输入法软键盘顶上去遮挡住了。原来的样式主要是当输入法点击出现时候修改为绑定动态，，通过来显示动态显示，初始值设置另外设置初始屏幕高度变化屏幕高度。背景：在写提交订单页面时候，底部按钮当我点击输入留言信息的时候，底部提交订单按钮被输入法软键盘顶上去遮挡住了。 showImg(https://segmentf...

jiekechoo 2019-08-22 16:05 评论0 收藏0
在iOS设备下，h5的input框失焦后页面被顶起来一部分bug解决

摘要：在之后，的框失焦后页面会出现被顶上去一部分的下面就来看下怎么解决这个，首先我们必须知道这两个方法软键盘弹起事件软键盘关闭事件。在iOS12之后，h5的input框失焦后页面会出现被顶上去一部分的bug,下面就来看下怎么解决这个bug，首先我们必须知道这两个方法focusin(软键盘弹起事件)、focusout(软键盘关闭事件)。注意：这里的input框的位置是在页面的底部废话不多说...

xiguadada 2019-08-23 14:51 评论0 收藏0