监听虚拟键盘或者软键盘是否弹出

最新推荐文章于 2025-03-06 14:23:55 发布

郑立峰

最新推荐文章于 2025-03-06 14:23:55 发布

阅读量2.6k

点赞数 2

分类专栏： js react vue 文章标签： cli javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_44070105/article/details/121607050

版权

本文介绍了一个npm包VirtualKeyboard，用于监听安卓和iOS设备的虚拟键盘状态。适用于React、Vue和小程序等JavaScript框架。通过新建文件引入代码，使用构造函数初始化，并在页面加载后调用onStart方法开始监听，虚拟键盘弹出和隐藏时执行指定函数。在页面卸载时，使用onEnd方法停止监听以避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

笔者一年前写的一个 npm 包，又用上了就补一下文章。

当初在网上找监听虚拟键盘弹出的模块没有找到就自己写了一个npm 包 virtualkeyboard
由于是第一次写npm 包没有进行es5编码使用可能会有点兼容性问题可直接复制下方原码到项目中
同时监听安卓和ios虚拟键盘
可用于react,vue，小程序等js代码的框架中

新建一个文件放入下放代码如VirtualKeyboard

/**
 *
 * @class 监听虚拟键盘
 * @classdesc 监听虚拟键盘弹出隐藏
 *  @public onEnd 结束监听虚拟键盘
 *  @public onShow 传递一个回调 监听虚拟键盘弹出
 *  @public onHidden 传递一个回调 监听虚拟键盘隐藏
 */
class VirtualKeyboard {
   
  /** @param 设备类型 1 安卓 2苹果  */
  type: number
  private originalHeight: number
  private show: any
  private hidden: any

  constructor() {
   
    this.type = this.IsIA()
    this.originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight
  }

  /**
   * @function  onShow 传递一个回调函数
   * @param  虚拟键盘弹出时触发
   */
  onShow = (fn?: any) => {
   
    this.show = fn
  }

  /**
   * @function  onHidden 传递一个回调函数
   * @param  虚拟键盘隐藏时触发
   */
  onHidden = (fn?: any) => {
   
    this.hidden = fn
  }