本篇内容介绍了“html5中怎么实现手机键盘弹出收起”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

键盘弹出

IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只有键盘弹出时页面恰好也滚动到最底部时，scrollTop 的变化值为键盘的高度，其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。

Android: 在Android系统中，键盘也是处在窗口的最上层，键盘弹起时，如果输入框在靠近底部的话，就会被键盘挡住，只有你输入的时候输入框才会滚动到可视化区域。

键盘收起

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

Android: 触发键盘上的按钮收起键盘时，输入框并不会失去焦点，因此不会触发页面的 blur 事件；触发输入框以外的区域时，输入框会失去焦点，触发输入框的 blur 事件。

期望的结果

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

对症下药

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

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

键盘弹出：输入框获取焦点时会自动触发键盘的弹起动作，因此，我们可以监听 focusin 事件，在里面实现键盘弹出后所需的页面逻辑。

键盘收起：当触发其他页面区域收起键盘时，我们可以监听 focusout 事件，在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在差异化表现，下面具体分析：

IOS：触发了 focusout 事件，仍然通过该办法监听。

Android：没有触发 focusout 事件。在 android 中，键盘的状态切换（弹出、收起）不仅和输入框关联，同时还会影响到 webview 高度的变化，那我们就可以通过监听 webview height 的变化来判断键盘是否收起。

系统判断

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

constua=window.navigator.userAgent.toLocaleLowerCase();constisIOS=/iphone|ipad|ipod/.test(ua);constisAndroid=/android/.test(ua);

IOS 处理

letisReset=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 处理

constoriginHeight=document.documentElement.clientHeight||document.body.clientHeight;this.resizeHandler=()=>{constresizeHeight=document.documentElement.clientHeight||document.body.clientHeight;constactiveElement=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-0909:36:40*@LastEditTime:2020-01-1012:08:47*/importReact,{Component}from'react';constkeyboard=()=>(WrappedComponent:any)=>classHOCextendsComponent{focusinHandler:(()=>void)|undefined;focusoutHandler:(()=>void)|undefined;resizeHandler:(()=>void)|undefined;componentDidMount(){constua=window.navigator.userAgent.toLocaleLowerCase();constisIOS=/iphone|ipad|ipod/.test(ua);constisAndroid=/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}/>;}};exportdefaultkeyboard;

使用：

//PersonForm.tsx@keyboard()classPersonFormextendsPureComponent<{},{}>{//业务逻辑...}exportdefaultPersonForm;

“html5中怎么实现手机键盘弹出收起”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！