html5⼿机键盘弹出收起的处理
前⾔：前端时间也是应项⽬的需求开始了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.LocaleLowerCase();
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;
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', sizeHandler);
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.LocaleLowerCase();
const isIOS = /iphone|ipad|ipod/.test(ua);
const isAndroid = /android/.test(ua);
if (isIOS) {
// 上⾯ IOS 处理
...
}
if (isAndroid) {
// 上⾯ Android 处理
...
}
}
componentWillUnmount() {
if (this.focusinHandler && this.focusoutHandler) {
veEventListener('focusin', this.focusinHandler);
veEventListener('focusout', this.focusoutHandler);
}
if (sizeHandler) {
veEventListener('resize', sizeHandler);
}
}
render() {
return <WrappedComponent {...this.props} />;
};
export default keyboard;
使⽤
// PersonForm.tsx
@keyboard()
class PersonForm extends PureComponent<{}, {}> {
// 业务逻辑
...
}
export default PersonForm;
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发表评论