跳到主要内容
版本：v2

Keyboard

键盘API提供键盘显示与可见性控制功能，并能追踪键盘显示/隐藏事件。

兼容cordova-plugin-ionic-keyboard的窗口事件​

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

示例​

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

const { Keyboard } = Plugins;

// 键盘插件事件

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.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(); // 隐藏键盘

键盘配置（仅iOS）​

在capacitor.config.json中可为iOS平台配置以下键盘参数：

  • resize: 控制键盘出现时应用的调整方式 可选值包括：

    • none: 不调整应用和WebView
    • native: （默认）键盘显示/隐藏时调整整个原生WebView，会影响vh相对单位
    • body: 仅调整HTML的<body>元素，视口不变因此不影响相对单位
    • ionic: 仅调整ionic应用的ion-app元素

  • 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>

设置键盘辅助栏的可见性。建议在登录/注册等简短表单中禁用辅助栏以获得更简洁的UI

参数类型
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

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

Interfaces​

KeyboardStyleOptions​

属性类型
style
KeyboardStyle

KeyboardResizeOptions​

属性类型
mode
KeyboardResize

PluginListenerHandle​

属性类型
remove() => void

KeyboardInfo​

属性类型
keyboardHeightnumber

Enums​

KeyboardStyle​

枚举值值
Dark"DARK"
Light"LIGHT"

KeyboardResize​

枚举值值
Body"body"
Ionic"ionic"
Native"native"
None"none"

Contents

编辑此页