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>
