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

admin

       在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。
键盘弹出
4 ~) B  I* h4 j" A0 j- F) H! Q•IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop 的变化值为键盘的高度，其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。
6 [, i. g! T9 [5 Y•Android: 在Android系统中，键盘也是处在窗口的最上层，键盘弹起时，如果输入框在靠近底部的话，就会被键盘挡住，只有你输入的时候输入框才会滚动到可视化区域。
. p% D2 h0 [: `; u  Z! q键盘收起
8 K+ x1 T4 F/ m4 V•IOS：触发键盘上的按钮收起键盘或者输入框以外的页面区域时，输入框会失去焦点，因此会触发输入框的 blur 事件；当键盘收起时，页面底部会出现一个空白区域，页面会被顶起。
•Android: 触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的 blur 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur 事件。
3 e/ F! I0 l/ N: U) E       在 h5 中目前没有接口可以直接监听键盘事件，但我们可以通过分析键盘弹出、收起的触发过程及表现形式，来判断键盘是弹出还是收起的状态。
; `# _4 d( e5 }* _8 T/ Q# k•键盘弹出：输入框获取焦点时会自动触发键盘的弹起动作，因此，我们可以监听 focusin 事件，在里面实现键盘弹出后所需的页面逻辑。
& O3 N! h; k" M8 {: c•键盘收起：当触发其他页面区域收起键盘时，我们可以监听 focusout 事件，在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在 差异化表现，下面具体分析：
•IOS：触发了 focusout 事件，仍然通过该办法监听。
4 ^( j: @! C3 c$ I" B+ _4 ]" Q•Android：没有触发 focusout 事件。在 android 中，键盘的状态切换（弹出、收起）不仅和输入框关联，同时还会影响到 webview 高度的变化，那我们就可以通过监听 webview height 的变化来判断键盘是否收起。
# B* `( \! r, {$ A1 Q系统判断
3 [8 F) Z+ u) k       在实践中我们可以通过 userAgent 来判断目前的系统：
2 b9 k; l3 {" `1 v  F7 x6 Q

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

IOS 处理
. |" L8 x$ V1 o+ ?2 F4 ~

复制代码
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 处理
) q3 k9 T; s1 L1 |# V. j

复制代码
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 中我们可以写一个类装饰器来修饰表单组件。
类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
/ R- j$ w8 D5 i- s/ x. T- N* N

复制代码
// 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;

使用
* o! n- p4 A: n0 d$ l! d+ H) r

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

export default PersonForm;

2 @. h6 J1 e- @) Q, P0 R6 I! ?
9 F: \' s! k# _/ s/ s' N, v+ e$ f2 x