前言：前端時間也是應(yīng)項目的需求開始了h5移動端的折騰之旅，在目前中臺的基礎(chǔ)上擴(kuò)展了兩個ToC移動端項目，下面就是在h5移動端表單頁面鍵盤彈出收起兼容性的一些總結(jié)。
問題
在 h5 項目中，我們會經(jīng)常遇到一些表單頁面，在輸入框獲取焦點時，會自動觸發(fā)鍵盤彈起，而鍵盤彈出在 IOS 與 Android 的 webview 中表現(xiàn)并非一致，同時當(dāng)我們主動觸發(fā)鍵盤收起時也同樣存在差異化。
鍵盤彈出
鍵盤收起
期望的結(jié)果
針對不同系統(tǒng)觸發(fā)鍵盤彈出收起時的差異化，我們希望功能流暢的同時，盡量保持用戶體驗的一致性。
對癥下藥
上面我們理清了目前市面上兩大主要系統(tǒng)的差異性，接下來就需對癥下藥了。
在 h5 中目前沒有接口可以直接監(jiān)聽鍵盤事件，但我們可以通過分析鍵盤彈出、收起的觸發(fā)過程及表現(xiàn)形式，來判斷鍵盤是彈出還是收起的狀態(tài)。
系統(tǒng)判斷
在實踐中我們可以通過 userAgent 來判斷目前的系統(tǒng)：
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; //聚焦時鍵盤彈出，焦點在輸入框之間切換時，會先觸發(fā)上一個輸入框的失焦事件，再觸發(fā)下一個輸入框的聚焦事件
};
this.focusoutHandler = () => {
isReset = true;
setTimeout(() => {
//當(dāng)焦點在彈出層的輸入框之間切換時先不歸位
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' });//焦點元素滾到可視區(qū)域的問題
},0)
}
} else {
// 鍵盤收起后邏輯
}
};
window.addEventListener('resize', this.resizeHandler);
react 封裝
在 react 中我們可以寫一個類裝飾器來修飾表單組件。
類裝飾器：類裝飾器在類聲明之前被聲明（緊靠著類聲明）。 類裝飾器應(yīng)用于類構(gòu)造函數(shù)，可以用來監(jiān)視，修改或替換類定義。
// 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<{}, {}> {
// 業(yè)務(wù)邏輯
...
}
export default PersonForm;
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
標(biāo)簽：金昌 萍鄉(xiāng) 阿壩 盤錦 聊城 赤峰 綏化 中山
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5手機(jī)鍵盤彈出收起的處理》，本文關(guān)鍵詞 html5,手機(jī),鍵盤,彈出,收起,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
