获取键盘的高度使得工具条吸附键盘于不同浏览器的方法

Kamisato Ayaka

保护你所爱！❤

浏览量：-，访问次数：-

公告

换新主题咯！欢迎大家交换友链！！！

78 字

1 分钟

获取键盘的高度使得工具条吸附键盘于不同浏览器的方法

2025-08-14

技术Tech

前端

浏览量：加载中...，访问次数：加载中...

对于苹果 `Safari`#

检测 viewsualViewport 的 resize 事件, 用两个 viewsualViewport.height 作差得键盘高度.

对于新版本 `Chrome`#

使用 virtualKeyboardApi.

1
if((window.navigator as any).virtualKeyboard) {
2
    const virtualKeyboardApi = (window.navigator as any).virtualKeyboard;
3
    virtualKeyboardApi.overlaysContent = true;
4
    virtualKeyboardApi.addEventListener('geometrychange', (e: any) => {
5
        const ctx = $.mobileEditBar.getContext();
6
        const ref = ctx.ref as unknown as HTMLElement;
7
        const height = virtualKeyboardApi.boundingRect.height ?? 0;
8
        ref.style.display = height > 0 ? 'block' : 'none';
9
    });
10
}