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


Posted in HTML / CSS onJuly 18, 2019

问题症状

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

页面结构

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

<div>
    <input type="text" placeholder="请填写省市县" />
    <input type="text" placeholder="请填写地址" />
    <input type="text" placeholder="请填写姓名" />
    <input type="text" placeholder="请填写联系电话" />
</div>

截图如下:

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

键盘弹起时页面自动上移

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

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

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

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

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

问题分析

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

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

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

事件代理

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

<div @blur="inputBlur">
    <input type="text" placeholder="请填写省市县" />
    <input type="text" placeholder="请填写地址" />
    <input type="text" placeholder="请填写姓名" />
    <input type="text" placeholder="请填写联系电话" />
</div>

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

无法冒泡的解决方案

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

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

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

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

<div @focusout="inputBlur">
    <input type="text" placeholder="请填写省市县" />
    <input type="text" placeholder="请填写地址" />
    <input type="text" placeholder="请填写姓名" />
    <input type="text" placeholder="请填写联系电话" />
</div>

然后,实现我们的事件处理器:

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 来解决:

<div @focusout="inputBlur" @focusin="inputFocus">
    <input type="text" placeholder="请填写省市县" />
    <input type="text" placeholder="请填写地址" />
    <input type="text" placeholder="请填写姓名" />
    <input type="text" placeholder="请填写联系电话" />
</div>
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);
            }
        }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3隔行变换色实现示例
Feb 19 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 #HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 #HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 #HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 #HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 #HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 #HTML / CSS
You might like
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP实现HTML页面静态化的方法
2015/11/04 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
python实现超简单端口转发的方法
2015/03/13 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python线程同步的实现代码
2018/10/03 Python
django页面跳转问题及注意事项
2019/07/18 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
打架检讨书50字
2014/01/11 职场文书
给男朋友的道歉信
2014/01/12 职场文书
董事长助理工作总结2015
2015/07/23 职场文书