跳到主要内容
版本：v2

键盘

Keyboard API 提供键盘显示和可见性控制，以及在键盘显示和隐藏时的事件跟踪。

与 cordova-plugin-ionic-keyboard 兼容的 Window 事件​

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

示例​

import { Plugins, KeyboardInfo } from '@capacitor/core';

const { Keyboard } = Plugins;

// Keyboard 插件事件

Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
  console.log('键盘将显示，高度为', info.keyboardHeight);
});

Keyboard.addListener('keyboardDidShow', (info: KeyboardInfo) => {
  console.log('键盘已显示，高度为', info.keyboardHeight);
});

Keyboard.addListener('keyboardWillHide', () => {
  console.log('键盘将隐藏');
});

Keyboard.addListener('keyboardDidHide', () => {
  console.log('键盘已隐藏');
});

// window 事件

window.addEventListener('keyboardWillShow', (e) => {
  console.log('键盘将显示，高度为', (<any>e).keyboardHeight);
});

window.addEventListener('keyboardDidShow', (e) => {
  console.log('键盘已显示，高度为', (<any>e).keyboardHeight);
});

window.addEventListener('keyboardWillHide', () => {
  console.log('键盘将隐藏');
});

window.addEventListener('keyboardDidHide', () => {
  console.log('键盘已隐藏');
});

// API

Keyboard.setAccessoryBarVisible({ isVisible: false });

Keyboard.show();

Keyboard.hide();

Keyboard 配置（仅 iOS）​

Keyboard 插件允许在 capacitor.config.json 中为 iOS 平台添加以下配置值：

  • resize：配置键盘出现时应用调整大小的方式。 允许的值有：

    • none：既不调整应用，也不调整 webview
    • native：（默认）整个原生 webview 将在键盘显示/隐藏时调整大小，这将影响 vh 相对单位。
    • body：仅调整 html <body> 元素的大小。相对单位不受影响，因为视口不会改变。
    • ionic：仅调整 html ion-app 元素的大小。仅用于 ionic 应用。

  • style：如果设置为 dark，将使用深色样式键盘替代常规键盘。

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "dark"
    }
  }
}

API​

show()​

show() => Promise<void>

显示键盘。此方法为 alpha 版本，可能存在一些问题。

hide()​

hide() => Promise<void>

隐藏键盘。

setAccessoryBarVisible(...)​

setAccessoryBarVisible(options: { isVisible: boolean; }) => Promise<void>

设置键盘上的辅助工具栏是否可见。我们建议在短表单（登录、注册等）上禁用辅助工具栏，以提供更简洁的用户界面。

参数类型
options{ isVisible: boolean; }

setScroll(...)​

setScroll(options: { isDisabled: boolean; }) => Promise<void>

以编程方式启用或禁用 WebView 滚动

参数类型
options{ isDisabled: boolean; }

setStyle(...)​

setStyle(options: KeyboardStyleOptions) => Promise<void>

以编程方式设置键盘样式

参数类型
options
KeyboardStyleOptions

setResizeMode(...)​

setResizeMode(options: KeyboardResizeOptions) => Promise<void>

以编程方式设置调整大小模式

参数类型
options
KeyboardResizeOptions

addListener(...)​

addListener(eventName: 'keyboardWillShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
参数类型
eventName"keyboardWillShow"
listenerFunc
(info: KeyboardInfo) => void

返回： 

PluginListenerHandle

addListener(...)​

addListener(eventName: 'keyboardDidShow', listenerFunc: (info: KeyboardInfo) => void) => PluginListenerHandle
参数类型
eventName"keyboardDidShow"
listenerFunc
(info: KeyboardInfo) => void

返回： 

PluginListenerHandle

addListener(...)​

addListener(eventName: 'keyboardWillHide', listenerFunc: () => void) => PluginListenerHandle
参数类型
eventName"keyboardWillHide"
listenerFunc() => void

返回： 

PluginListenerHandle

addListener(...)​

addListener(eventName: 'keyboardDidHide', listenerFunc: () => void) => PluginListenerHandle
参数类型
eventName"keyboardDidHide"
listenerFunc() => void

返回： 

PluginListenerHandle

removeAllListeners()​

removeAllListeners() => void

移除该插件的所有原生监听器

接口​

KeyboardStyleOptions​

属性类型
style
KeyboardStyle

KeyboardResizeOptions​

属性类型
mode
KeyboardResize

PluginListenerHandle​

属性类型
remove() => void

KeyboardInfo​

属性类型
keyboardHeightnumber

枚举​

KeyboardStyle​

成员值
Dark"DARK"
Light"LIGHT"

KeyboardResize​

成员值
Body"body"
Ionic"ionic"
Native"native"
None"none"

Contents

编辑此页