自定义和考虑屏幕键盘的存在是开发人员在构建移动应用程序和 PWA 时面临的两个常见障碍。本章将介绍可用于管理应用程序中屏幕键盘的各种工具。
inputmode
inputmode
属性允许开发人员指定可以将什么类型的数据输入到输入中。
- JavaScript
- Angular
- React
- Vue
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
<IonItem>
<IonLabel>Username or Email</IonLabel>
<IonInput inputmode="email"></IonInput>
</IonItem>
<IonItem>
<IonLabel>Enter a number</IonLabel>
<IonTextarea inputmode="numeric"></IonTextarea>
</IonItem>
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
inputmode
运行 Chrome 66+ 和 iOS Safari 12.2+ 的设备支持该属性:https: //caniuse.com/#search=inputmode
输入键提示
enterkeyhint
属性允许开发人员指定应为“Enter”键显示哪种类型的操作标签或图标。使用enterkeyhint
让用户知道当他们点击“Enter”键时会发生什么。
- JavaScript
- Angular
- React
- Vue
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
<IonItem>
<IonLabel>Enter search query</IonLabel>
<IonInput enterkeyhint="search" type="search"></IonInput>
</IonItem>
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
enterkeyhint
运行 Chrome 77+ 和 iOS Safari 13.4+ 的设备支持该属性。
深色模式
默认情况下,键盘主题由操作系统决定。例如,如果在 iOS 上启用了深色模式,即使您的应用程序的 CSS 中没有深色主题,您应用程序中的键盘也会显示深色主题。
在移动网络浏览器中或作为 PWA 运行应用程序时,无法强制键盘以特定主题出现。
在 Capacitor 或 Cordova 中运行应用程序时,可以强制键盘以特定主题出现。有关此配置的更多信息,请参阅Capacitor键盘文档。
隐藏附件栏
当运行任何类型的基于 Web 的应用程序时,iOS 会在键盘上方显示一个附件栏。这允许用户移动到下一个或上一个输入以及关闭键盘。
在移动网络浏览器中或作为 PWA 运行应用程序时,无法隐藏附件栏。
在 Capacitor 或 Cordova 中运行应用程序时,可以隐藏附件栏。有关此配置的更多信息,请参阅Capacitor键盘文档。
键盘生命周期
检测屏幕键盘的存在对于调整将被键盘隐藏的输入的位置很有用。对于 Capacitor 和 Cordova 应用程序,开发人员通常依赖本机键盘插件来侦听键盘生命周期事件。对于在移动浏览器中运行或作为 PWA 运行的应用程序,开发人员可以在支持的情况下使用Visual Viewport API。Ionic Framework 包装了这两种方法ionKeyboardDidShow
并ionKeyboardDidHide
在window
. 的事件负载ionKeyboardDidShow
包含键盘高度的近似值(以像素为单位)。
- JavaScript
- Angular
- React
- Vue
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
});
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
});
}
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
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}`);
});
分享笔记