鍵盤

自訂和考量螢幕鍵盤的存在是開發人員在建置行動應用程式和 PWA 時面臨的兩個常見障礙。本指南將介紹可用於管理應用程式中螢幕鍵盤的各種工具。

inputmode

inputmode 屬性允許開發人員指定可能會輸入到輸入欄位的資料類型。這將提示瀏覽器顯示一個包含與使用者可能輸入內容相關的按鈕的鍵盤。例如，inputmode="email" 將顯示一個帶有 @ 鍵的鍵盤以及其他用於輸入電子郵件的優化。

由於 inputmode 是一個全域屬性，因此除了正規輸入元素外，它還可以用於 Ionic 元件，例如 ion-input 和 ion-textarea。

需要特定資料類型的輸入應使用 type 屬性。例如，需要電子郵件的輸入應使用 type="email"，而不是指定 inputmode。這是因為將輸入的資料始終會是電子郵件的形式。另一方面，如果輸入接受電子郵件或使用者名稱，則使用 inputmode="email" 是適當的，因為輸入的資料不一定始終是電子郵件地址。

如需接受的值的清單，請參閱 inputmode 文件。

用法

注意

在執行 Chrome 66+ 和 iOS Safari 12.2+ 的裝置上支援 inputmode 屬性：https://caniuse.dev.org.tw/#search=inputmode

enterkeyhint

enterkeyhint 屬性允許開發人員指定「Enter」鍵應顯示哪種類型的動作標籤或圖示。使用 enterkeyhint 可讓使用者知道他們點擊「Enter」鍵時會發生什麼事。此處應指定的值取決於使用者正在執行的內容。例如，如果使用者在搜尋框中輸入內容，開發人員應確保輸入具有 enterkeyhint="search"。

由於 enterkeyhint 是一個全域屬性，因此除了正規輸入元素外，它還可以用於 Ionic 元件，例如 ion-input 和 ion-textarea。

如需接受的值的清單，請參閱 enterkeyhint 標準。

用法

注意

在執行 Chrome 77+ 和 iOS Safari 13.4+ 的裝置上支援 enterkeyhint 屬性。

深色模式

預設情況下，鍵盤主題由作業系統決定。例如，如果在 iOS 上啟用深色模式，則即使您的應用程式在其 CSS 中沒有深色主題，應用程式中的鍵盤也會以深色主題顯示。

當在行動 Web 瀏覽器中或作為 PWA 執行應用程式時，無法強制鍵盤以特定主題顯示。

當在 Capacitor 或 Cordova 中執行應用程式時，可以強制鍵盤以特定主題顯示。如需有關此設定的詳細資訊，請參閱 Capacitor 鍵盤文件。

隱藏配件列

當執行任何類型的基於 Web 的應用程式時，iOS 會在鍵盤上方顯示一個配件列。這允許使用者移動到下一個或上一個輸入，以及關閉鍵盤。

當在行動 Web 瀏覽器中或作為 PWA 執行應用程式時，無法隱藏配件列。

當在 Capacitor 或 Cordova 中執行應用程式時，可以隱藏配件列。如需有關此設定的詳細資訊，請參閱 Capacitor 鍵盤文件。

鍵盤生命週期事件

偵測螢幕鍵盤的存在對於調整輸入的位置非常有用，否則輸入會被鍵盤隱藏。對於 Capacitor 和 Cordova 應用程式，開發人員通常依賴原生鍵盤外掛程式來監聽鍵盤生命週期事件。對於在行動瀏覽器中或作為 PWA 執行的應用程式，開發人員可以使用支援的 Visual Viewport API。Ionic Framework 包裝了這兩種方法，並在 window 上發出 ionKeyboardDidShow 和 ionKeyboardDidHide 事件。ionKeyboardDidShow 的事件負載包含鍵盤高度（以像素為單位）的近似值。

用法

JavaScript

window.addEventListener('ionKeyboardDidShow', ev => {
  const { keyboardHeight } = ev;
  // Do something with the keyboard height such as translating an input above the keyboard.
});

window.addEventListener('ionKeyboardDidHide', () => {
  // Move input back to original location
});

Angular

import { Platform } from '@ionic/angular';

...

constructor(private platform: Platform) {
  this.platform.keyboardDidShow.subscribe(ev => {
    const { keyboardHeight } = ev;
    // Do something with the keyboard height such as translating an input above the keyboard.
  });

  this.platform.keyboardDidHide.subscribe(() => {
    // Move input back to original location
  });
}

Angular (獨立)

import { Platform } from '@ionic/angular/standalone';

...

constructor(private platform: Platform) {
  this.platform.keyboardDidShow.subscribe(ev => {
    const { keyboardHeight } = ev;
    // Do something with the keyboard height such as translating an input above the keyboard.
  });

  this.platform.keyboardDidHide.subscribe(() => {
    // Move input back to original location
  });
}

React

import { useKeyboardState } from '@ionic/react-hooks/keyboard';

...

const { isOpen, keyboardHeight } = useKeyboardState();

// Do something with the keyboard height such as translating an input above the keyboard

Vue

import { useKeyboard } from '@ionic/vue';
import { watch } from 'vue';

...

const { isOpen, keyboardHeight } = useKeyboard();

watch(keyboardHeight, () => {
  console.log(`Is Keyboard Open: ${isOpen.value}, Keyboard Height: ${keyboardHeight.value}`);
});

注意

對於在行動 Web 瀏覽器中或作為 PWA 執行的應用程式，僅在 Chrome 62+ 和 iOS Safari 13.0+ 上支援鍵盤生命週期事件。