前言：前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。
问题
在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。
键盘弹出
键盘收起
期望的结果
针对不同系统触发键盘弹出收起时的差异化，我们希望功能流畅的同时，尽量保持用户体验的一致性。
对症下药
上面我们理清了目前市面上两大主要系统的差异性，接下来就需对症下药了。
在 h5 中目前没有接口可以直接监听键盘事件，但我们可以通过分析键盘弹出、收起的触发过程及表现形式，来判断键盘是弹出还是收起的状态。
系统判断
在实践中我们可以通过 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;以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
