runoops.com

ionic 键盘

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

inputmode

inputmode属性允许开发人员指定可以将什么类型的数据输入到输入中。

<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”键时会发生什么。

<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 包装了这两种方法ionKeyboardDidShowionKeyboardDidHidewindow. 的事件负载ionKeyboardDidShow包含键盘高度的近似值(以像素为单位)。

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}`);
});

Captcha Code

0 笔记

分享笔记

Inline Feedbacks
View all notes