html5手机键盘弹出收起的处理
程序员文章站
2022-04-18 17:50:45
这篇文章主要介绍了html5手机键盘弹出收起的处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-01-20...
前言:前端时间也是应项目的需求开始了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.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;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 使用canvas压缩图片上传的方法示例
下一篇: 互联网入口争夺战