详解通过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截取字符串实例代码【推荐】
Jun 07 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
PHP字符串处理的10个简单方法
2010/06/30 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大学生如何写自荐信
2014/01/08 职场文书
产品促销活动策划书
2014/01/15 职场文书
公证委托书模板
2014/04/03 职场文书
团队队名口号大全
2014/06/06 职场文书
道歉的话语大全
2015/05/12 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers