1. 封装监听移动端软键盘弹出、收起事件的类
iOS 系统中软键盘弹起时，虽然仅会引起 $(‘body’).scrollTop 值改变，但可通过输入框的获取焦点情况来做判断。
但也只能在 iOS 系统中采用这个方案，因为在 Android 系统中存在主动收起键盘后，输入框并不失焦的情况。
Android 系统中软键盘弹起或收起时，都会引起窗口的高度发生变化，因此可监听 window 的 onresize 事件；
focusin 和 focusout 对应 focus 和 blur。使用 focusin 和 focusout 的原因：focusin 和 focusout 可以冒泡，focus 和 blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。
/*** @class 监听虚拟键盘* @classdesc 监听虚拟键盘弹出隐藏* @public onEnd 结束监听虚拟键盘* @public onShow 传递一个回调 监听虚拟键盘弹出* @public onHidden 传递一个回调 监听虚拟键盘隐藏*/class MonitorKeyboard {constructor() {this.type = this.IsIA();this.originalHeight = window.innerHeight;}/*** @function IsIA 获取设备类型* @param 1 Android 2 iOS */IsIA = () => {const userAgent = typeof window === 'object' ? window.navigator.userAgent : '';if (/android/i.test(userAgent)) {return 1; } else if (/iPhone|iPod|iPad/i.test(userAgent)) {return 2; }}// Android系统onResize = () => {//键盘弹起与隐藏都会引起窗口的高度发生变化const resizeHeight = window.innerHeight;if (this.originalHeight - resizeHeight > 50) {this.show('Android系统: 软键盘弹出');} else {this.hidden('Android系统: 软键盘收起');}}// iOS获取焦点onFocusin = () => {this.show('iOS系统:软键盘弹出');}// iOS失去焦点onFocusout = () => {this.hidden('iOS系统:软键盘收起');}/** * @function onStart 开始监听虚拟键盘 */onStart = () => {if (this.type == 1) {// 获取窗口的高度window.addEventListener('resize', this.onResize);}if (this.type == 2) {// iOS系统window.addEventListener('focusin', this.onFocusin);window.addEventListener('focusout', this.onFocusout);}}/** * @function onEnd 结束监听虚拟键盘 */onEnd = () => {if (this.type == 1) {//获取窗口的高度window.removeEventListener('resize', this.onResize);}if (this.type == 2) {window.removeEventListener('focusin', this.onFocusin);window.removeEventListener('focusout', this.onFocusout);}}/*** @function onShow 传递一个回调函数* @param 虚拟键盘弹出时触发*/onShow = (fn) => {this.show = fn;}/*** @function onHidden 传递一个回调函数* @param 虚拟键盘隐藏时触发*/onHidden = (fn) => {this.hidden = fn;}}export default MonitorKeyboard
2. 使用
<template><div><input type="text" v-model="inputVal"></div></template><script>import MonitorKeyboard from '@/utils/monitorKeyboard.js'export default {data(){return {monitorKeyboard:null,inputVal:'',}},methods:{getKeyboardState(){this.monitorKeyboard = new MonitorKeyboard();this.monitorKeyboard.onStart();// 监听虚拟键盘弹出事件this.monitorKeyboard.onShow(() => {console.log('键盘弹出')})//监听键盘收起的事件this.monitorKeyboard.onHidden(() => {console.log('键盘收起')})}},mounted(){this.getKeyboardState();},beforeDestroy(){this.monitorKeyboard.onEnd();},}</script>
3. 相关知识拓展
传送门：ES6新特性 类（class）详解
传送门：JavaScript window 对象详解
如果觉得《Vue中 监听移动端软键盘弹出 收起事件》对你有帮助，请点赞、收藏，并留下你的观点哦！
