跳至主要內容
版本：v8

@capacitor/keyboard

鍵盤 API 提供鍵盤顯示和可見性控制，以及鍵盤顯示和隱藏時的事件追蹤。

安裝​

npm install @capacitor/keyboard
npx cap sync

範例​

import { Keyboard } from '@capacitor/keyboard';

Keyboard.addListener('keyboardWillShow', info => {
  console.log('keyboard will show with height:', info.keyboardHeight);
});

Keyboard.addListener('keyboardDidShow', info => {
  console.log('keyboard did show with height:', info.keyboardHeight);
});

Keyboard.addListener('keyboardWillHide', () => {
  console.log('keyboard will hide');
});

Keyboard.addListener('keyboardDidHide', () => {
  console.log('keyboard did hide');
});

設定​

在 iOS 上，可以使用以下選項設定鍵盤

屬性類型描述預設值起始版本
resizeKeyboardResize設定鍵盤出現時調整應用程式大小的方式。僅適用於 iOS。native1.0.0
styleKeyboardStyle如果您的應用程式不支援深色/淺色主題變更，則覆寫鍵盤樣式。如果未設定，鍵盤樣式將取決於裝置外觀。僅適用於 iOS。1.0.0
resizeOnFullScreen布林值當應用程式處於全螢幕模式時（即，如果使用 StatusBar 外掛程式來覆蓋狀態列），Android 存在一個錯誤，會阻止鍵盤調整 WebView 的大小。如果將此設定設為 true，則會新增一個解決方法，即使應用程式處於全螢幕模式，也會調整 WebView 的大小。僅適用於 Android1.1.0

範例​

在 capacitor.config.json 中

{
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "DARK",
      "resizeOnFullScreen": true
    }
  }
}

在 capacitor.config.ts 中

/// <reference types="@capacitor/keyboard" />

import { CapacitorConfig } from '@capacitor/cli';
import { KeyboardResize, KeyboardStyle } from '@capacitor/keyboard';

const config: CapacitorConfig = {
  plugins: {
    Keyboard: {
      resize: KeyboardResize.Body,
      style: KeyboardStyle.Dark,
      resizeOnFullScreen: true,
    },
  },
};

export default config;

與 cordova-plugin-ionic-keyboard 的相容性​

為了保持與 cordova-plugin-ionic-keyboard 的相容性，以下事件也適用於 window.addEventListener

  • keyboardWillShow
  • keyboardDidShow
  • keyboardWillHide
  • keyboardDidHide

API​

show()​

show() => Promise<void>

顯示鍵盤。此方法為 Alpha 版，可能存在問題。

此方法僅在 Android 上支援。

起始版本 1.0.0

hide()​

hide() => Promise<void>

隱藏鍵盤。

起始版本 1.0.0

setAccessoryBarVisible(...)​

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

設定鍵盤上是否應顯示輔助工具列。我們建議停用簡短表單（登入、註冊等）的輔助工具列，以提供更簡潔的使用者介面。

此方法僅在 iPhone 裝置上支援。

參數類型
options{ isVisible: boolean; }

起始版本 1.0.0

setScroll(...)​

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

以程式設計方式啟用或停用 WebView 捲動。

此方法僅在 iOS 上支援。

參數類型
options{ isDisabled: boolean; }

起始版本 1.0.0

setStyle(...)​

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

以程式設計方式設定鍵盤樣式。

此方法僅在 iOS 上支援。

參數類型
optionsKeyboardStyleOptions

起始版本 1.0.0

setResizeMode(...)​

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

以程式設計方式設定調整大小模式。

此方法僅在 iOS 上支援。

參數類型
optionsKeyboardResizeOptions

起始版本 1.0.0

getResizeMode()​

getResizeMode() => Promise<KeyboardResizeOptions>

取得目前設定的調整大小模式。

此方法僅在 iOS 上支援。

傳回： Promise<KeyboardResizeOptions>

起始版本 4.0.0

addListener('keyboardWillShow', ...)​

addListener(eventName: 'keyboardWillShow', listenerFunc: (info: KeyboardInfo) => void) => Promise<PluginListenerHandle>

在鍵盤即將顯示時進行偵聽。

在 Android 上，keyboardWillShow 和 keyboardDidShow 幾乎同時觸發。

參數類型
eventName'keyboardWillShow'
listenerFunc(info: KeyboardInfo) => void

傳回： Promise<PluginListenerHandle>

起始版本 1.0.0

addListener('keyboardDidShow', ...)​

addListener(eventName: 'keyboardDidShow', listenerFunc: (info: KeyboardInfo) => void) => Promise<PluginListenerHandle>

在鍵盤顯示時進行偵聽。

在 Android 上，keyboardWillShow 和 keyboardDidShow 幾乎同時觸發。

參數類型
eventName'keyboardDidShow'
listenerFunc(info: KeyboardInfo) => void

傳回： Promise<PluginListenerHandle>

起始版本 1.0.0

addListener('keyboardWillHide', ...)​

addListener(eventName: 'keyboardWillHide', listenerFunc: () => void) => Promise<PluginListenerHandle>

在鍵盤即將隱藏時進行偵聽。

在 Android 上，keyboardWillHide 和 keyboardDidHide 幾乎同時觸發。

參數類型
eventName'keyboardWillHide'
listenerFunc() => void

傳回： Promise<PluginListenerHandle>

起始版本 1.0.0

addListener('keyboardDidHide', ...)​

addListener(eventName: 'keyboardDidHide', listenerFunc: () => void) => Promise<PluginListenerHandle>

在鍵盤隱藏時進行偵聽。

在 Android 上，keyboardWillHide 和 keyboardDidHide 幾乎同時觸發。

參數類型
eventName'keyboardDidHide'
listenerFunc() => void

傳回： Promise<PluginListenerHandle>

起始版本 1.0.0

removeAllListeners()​

removeAllListeners() => Promise<void>

移除此外掛程式的所有原生偵聽器。

起始版本 1.0.0

介面​

KeyboardStyleOptions​

屬性類型描述預設值起始版本
styleKeyboardStyle鍵盤樣式。KeyboardStyle.Default1.0.0

KeyboardResizeOptions​

屬性類型描述起始版本
modeKeyboardResize鍵盤出現時用於調整元素大小的模式。1.0.0

PluginListenerHandle​

屬性類型
remove() => Promise<void>

KeyboardInfo​

屬性類型描述起始版本
keyboardHeightnumber鍵盤高度。1.0.0

列舉​

KeyboardStyle​

成員值描述起始版本
Dark'DARK'深色鍵盤。1.0.0
Light'LIGHT'淺色鍵盤。1.0.0
預設值'DEFAULT'在 iOS 13 及更新版本中，鍵盤樣式基於裝置外觀。如果裝置使用深色模式，則鍵盤將為深色。如果裝置使用淺色模式，則鍵盤將為淺色。在 iOS 12 上，鍵盤將為淺色。1.0.0

KeyboardResize​

成員值描述起始版本
Body'body'僅會調整 body HTML 元素的大小。相對單位不受影響，因為視窗不會變更。1.0.0
Ionic'ionic'僅會調整 ion-app HTML 元素的大小。僅適用於 Ionic Framework 應用程式。1.0.0
Native'native'當鍵盤顯示/隱藏時，將調整整個原生 Web View 的大小。這會影響 vh 相對單位。1.0.0
None'none'不會調整應用程式或 Web View 的大小。1.0.0

目錄

編輯此頁面