在 h5 项目中,我们会经常遇到一些表单页面,在输入框获取焦点时,会自动触发键盘弹起,而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致,同时当我们主动触发键盘收起时也同样存在差异化。
8 x" B' M$ u# }7 r$ I% B键盘弹出2 j5 I2 z' f1 B1 o+ e5 u: m
•IOS:IOS系统 的键盘处在窗口的最上层,当键盘弹起时,webview 的高度 height 并没有改变,只是 scrollTop 发生变化,页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度,而只有键盘弹出时页面恰好也滚动到最底部时,scrollTop 的变化值为键盘的高度,其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。
4 o, P. B! B& D/ l•Android: 在Android系统中,键盘也是处在窗口的最上层,键盘弹起时,如果输入框在靠近底部的话,就会被键盘挡住,只有你输入的时候输入框才会滚动到可视化区域。) B3 C! p! S+ U1 X/ j0 P1 s& ]; p
键盘收起
) R: `: l) y2 p6 I( c•IOS:触发键盘上的按钮收起键盘或者输入框以外的页面区域时,输入框会失去焦点,因此会触发输入框的 blur 事件;当键盘收起时,页面底部会出现一个空白区域,页面会被顶起。: ?3 |: p4 Y+ v* c
•Android: 触发键盘上的按钮收起键盘时,输入框并不会失去焦点,因此不会触发页面的 blur 事件;触发输入框以外的区域时,输入框会失去焦点,触发输入框的 blur 事件。
3 p$ E/ r/ k: h3 ? 在 h5 中目前没有接口可以直接监听键盘事件,但我们可以通过分析键盘弹出、收起的触发过程及表现形式,来判断键盘是弹出还是收起的状态。
: C0 q4 v( Z6 I& Y Y, b1 G" v* u•键盘弹出:输入框获取焦点时会自动触发键盘的弹起动作,因此,我们可以监听 focusin 事件,在里面实现键盘弹出后所需的页面逻辑。
* m0 s5 |5 z. a•键盘收起:当触发其他页面区域收起键盘时,我们可以监听 focusout 事件,在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在 差异化表现,下面具体分析:
4 t$ z# [9 K9 L* ~. O) \; C$ Z" C* B•IOS:触发了 focusout 事件,仍然通过该办法监听。
4 t- ^; B# X" i' {•Android:没有触发 focusout 事件。在 android 中,键盘的状态切换(弹出、收起)不仅和输入框关联,同时还会影响到 webview 高度的变化,那我们就可以通过监听 webview height 的变化来判断键盘是否收起。
% ^' B! o3 _4 V* w' X系统判断' X* c1 W* }) B- Z% U
在实践中我们可以通过 userAgent 来判断目前的系统:* C4 [( B, u: R. c
- const ua = window.navigator.userAgent.toLocaleLowerCase();
- const isIOS = /iphone|ipad|ipod/.test(ua);
- const isAndroid = /android/.test(ua);
IOS 处理
: s4 B: u7 ^' }* Q- 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 处理
! M/ v+ D( {$ {0 C# f- 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 封装
$ K% {( E9 c2 q7 J D 在 react 中我们可以写一个类装饰器来修饰表单组件。
' F1 Y: X2 G2 i9 P' } C2 }( y类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。 类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。 1 g' e, r7 {/ G! S$ L! o
- // keyboard.tsx
- /*
- * @Description: 键盘处理装饰器
- */
- 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;
使用
0 \9 f/ X/ e" B- // PersonForm.tsx
- @keyboard()
- class PersonForm extends PureComponent<{}, {}> {
- // 业务逻辑
- ...
- }
-
- export default PersonForm;
; g3 r; W' N0 g. x$ X
- K$ V% ?0 T# ^3 a. V- S2 i3 [) o2 H, L- }, A; V! t" U
|