html5手机键盘弹出收起的处理


Posted in HTML / CSS onJanuary 20, 2020

前言:前端时间也是应项目的需求开始了h5移动端的折腾之旅,在目前中台的基础上扩展了两个ToC移动端项目,下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。

问题

在 h5 项目中,我们会经常遇到一些表单页面,在输入框获取焦点时,会自动触发键盘弹起,而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致,同时当我们主动触发键盘收起时也同样存在差异化。

键盘弹出

  • IOS:IOS系统 的键盘处在窗口的最上层,当键盘弹起时,webview 的高度 height 并没有改变,只是 scrollTop 发生变化,页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度,而只有键盘弹出时页面恰好也滚动到最底部时,scrollTop 的变化值为键盘的高度,其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。
  • Android: 在Android系统中,键盘也是处在窗口的最上层,键盘弹起时,如果输入框在靠近底部的话,就会被键盘挡住,只有你输入的时候输入框才会滚动到可视化区域。

键盘收起

  • IOS:触发键盘上的按钮收起键盘或者输入框以外的页面区域时,输入框会失去焦点,因此会触发输入框的 blur 事件;当键盘收起时,页面底部会出现一个空白区域,页面会被顶起。
  • Android: 触发键盘上的按钮收起键盘时,输入框并不会失去焦点,因此不会触发页面的 blur 事件;触发输入框以外的区域时,输入框会失去焦点,触发输入框的 blur 事件。

期望的结果

针对不同系统触发键盘弹出收起时的差异化,我们希望功能流畅的同时,尽量保持用户体验的一致性。

对症下药

上面我们理清了目前市面上两大主要系统的差异性,接下来就需对症下药了。

在 h5 中目前没有接口可以直接监听键盘事件,但我们可以通过分析键盘弹出、收起的触发过程及表现形式,来判断键盘是弹出还是收起的状态。

  • 键盘弹出:输入框获取焦点时会自动触发键盘的弹起动作,因此,我们可以监听 focusin 事件,在里面实现键盘弹出后所需的页面逻辑。
  • 键盘收起:当触发其他页面区域收起键盘时,我们可以监听 focusout 事件,在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在差异化表现,下面具体分析:
    • IOS:触发了 focusout 事件,仍然通过该办法监听。
    • Android:没有触发 focusout 事件。在 android 中,键盘的状态切换(弹出、收起)不仅和输入框关联,同时还会影响到 webview 高度的变化,那我们就可以通过监听 webview height 的变化来判断键盘是否收起。

系统判断

在实践中我们可以通过 userAgent 来判断目前的系统:

const ua = window.navigator.userAgent.toLocaleLowerCase();
const isIOS = /iphone|ipad|ipod/.test(ua);
const isAndroid = /android/.test(ua);

IOS 处理

let isReset = true; //是否归位

this.focusinHandler = () => {
  isReset = false; //聚焦时键盘弹出,焦点在输入框之间切换时,会先触发上一个输入框的失焦事件,再触发下一个输入框的聚焦事件
};

this.focusoutHandler = () => {
  isReset = true;
  setTimeout(() => {
    //当焦点在弹出层的输入框之间切换时先不归位
    if (isReset) {
        window.scroll(0, 0); //确定延时后没有聚焦下一元素,是由收起键盘引起的失焦,则强制让页面归位
    }
  }, 30);
};

document.body.addEventListener('focusin', this.focusinHandler);
document.body.addEventListener('focusout', this.focusoutHandler);

Android 处理

const originHeight = document.documentElement.clientHeight || document.body.clientHeight;

this.resizeHandler = () => {
  const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const activeElement = document.activeElement;
  if (resizeHeight < originHeight) {
    // 键盘弹起后逻辑
    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
      setTimeout(()=>{
        activeElement.scrollIntoView({ block: 'center' });//焦点元素滚到可视区域的问题
      },0)
    }
  } else {
    // 键盘收起后逻辑
  }
};

window.addEventListener('resize', this.resizeHandler);

react 封装

在 react 中我们可以写一个类装饰器来修饰表单组件。

类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。 类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。

// keyboard.tsx
/*
 * @Description: 键盘处理装饰器
 * @Author: hzzly
 * @LastEditors: hzzly
 * @Date: 2020-01-09 09:36:40
 * @LastEditTime: 2020-01-10 12:08:47
 */
import React, { Component } from 'react';

const keyboard = () => (WrappedComponent: any) =>
  class HOC extends Component {
    focusinHandler: (() => void) | undefined;
    focusoutHandler: (() => void) | undefined;
    resizeHandler: (() => void) | undefined;
    componentDidMount() {
      const ua = window.navigator.userAgent.toLocaleLowerCase();
      const isIOS = /iphone|ipad|ipod/.test(ua);
      const isAndroid = /android/.test(ua);
      if (isIOS) {
        // 上面 IOS 处理
        ...
      }
      if (isAndroid) {
        // 上面 Android 处理
        ...
      }
    }

    componentWillUnmount() {
      if (this.focusinHandler && this.focusoutHandler) {
        document.body.removeEventListener('focusin', this.focusinHandler);
        document.body.removeEventListener('focusout', this.focusoutHandler);
      }
      if (this.resizeHandler) {
        document.body.removeEventListener('resize', this.resizeHandler);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

export default keyboard;

使用

// PersonForm.tsx
@keyboard()
class PersonForm extends PureComponent<{}, {}> {
  // 业务逻辑
  ...
}

export default PersonForm;

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

HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 #HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 #HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 #HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 #HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 #HTML / CSS
You might like
discuz7 phpMysql操作类
2009/06/21 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php反射应用示例
2014/02/25 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
什么是Web Service?
2012/07/25 面试题
物业管理委托协议(2篇)
2014/09/23 职场文书
社区元宵节活动总结
2015/02/06 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL