键盘

自定义和考虑屏幕键盘的存在是开发人员在构建移动应用程序和 PWA 时面临的两个常见障碍。本指南将介绍在应用程序中管理屏幕键盘的各种可用工具。

inputmode

inputmode 属性允许开发人员指定可能输入到输入中的数据类型。这将提示浏览器显示包含与用户可能输入的内容相关的按钮的键盘。例如，inputmode="email" 将显示一个带有 @ 键以及其他针对输入电子邮件优化的键盘。

由于 inputmode 是一个全局属性，因此除了常规输入元素之外，它还可以在 Ionic 组件（如 ion-input 和 ion-textarea）上使用。

需要特定数据类型的输入应该使用 type 属性。例如，需要电子邮件的输入应该使用 type="email" 而不是指定 inputmode。这是因为输入的数据始终将是电子邮件形式。另一方面，如果输入接受电子邮件或用户名，则使用 inputmode=”email” 是合适的，因为输入的数据不总是电子邮件地址。

有关接受值的列表，请参阅 inputmode 文档。

用法

注意

inputmode 属性在运行 Chrome 66+ 和 iOS Safari 12.2+ 的设备上受支持：https://caniuse.cn/#search=inputmode

enterkeyhint

enterkeyhint 属性允许开发人员指定应为“Enter”键显示的操作标签或图标类型。使用 enterkeyhint 使用户了解点击“Enter”键时的操作。此处应指定的 value 取决于用户正在执行的操作的上下文。例如，如果用户正在搜索框中键入内容，开发人员应确保输入具有 enterkeyhint="search"。

由于 enterkeyhint 是一个全局属性，因此除了常规输入元素之外，它还可以在 Ionic 组件（如 ion-input 和 ion-textarea）上使用。

有关接受值的列表，请参阅 enterkeyhint 标准。

用法

注意

enterkeyhint 属性在运行 Chrome 77+ 和 iOS Safari 13.4+ 的设备上受支持。

暗黑模式

默认情况下，键盘主题由操作系统决定。例如，如果在 iOS 上启用了暗黑模式，则应用程序中的键盘将以暗黑主题显示，即使应用程序的 CSS 中没有暗黑主题。

在移动 Web 浏览器或作为 PWA 运行应用程序时，无法强制键盘以特定主题显示。

在 Capacitor 或 Cordova 中运行应用程序时，可以强制键盘以特定主题显示。有关此配置的更多信息，请参阅 Capacitor 键盘文档。

隐藏附件栏

在运行任何类型的基于 Web 的应用程序时，iOS 将在键盘上方显示一个附件栏。这允许用户移动到下一个或上一个输入，以及关闭键盘。

在移动 Web 浏览器或作为 PWA 运行应用程序时，无法隐藏附件栏。

在 Capacitor 或 Cordova 中运行应用程序时，可以隐藏附件栏。有关此配置的更多信息，请参阅 Capacitor 键盘文档。

键盘生命周期事件

检测屏幕键盘的存在对于调整可能被键盘隐藏的输入的定位非常有用。对于 Capacitor 和 Cordova 应用程序，开发人员通常依赖于原生键盘插件来监听键盘生命周期事件。对于在移动浏览器或作为 PWA 运行的应用程序，开发人员可以使用 可视视窗 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+ 上受支持。