Keyboard

開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。

inputmode

開発者は、 inputmode 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 inputmode="email" を指定すると、 @ キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。

inputmode はグローバル属性であるため、通常の入力エレメントに加えて、ion-input や ion-textarea などのIonicコンポーネントでも使用できます。

特定のデータ型を必要とする入力では、代わりに type 属性を使用する必要があります。たとえば、emailの入力では、 inputmode. を指定するのではなく、type="email" を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に type="email" になるとは限らないため、 inputmode=”email” を使用するのが適切です。

使用可能な値のリストについては、inputmode Documentationを参照してください。

Usage

JavaScript

<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>

Angular

<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>

React

<IonItem>
  <IonLabel>Username or Email</IonLabel>
  <IonInput inputmode="email"></IonInput>
</IonItem>

<IonItem>
  <IonLabel>Enter a number</IonLabel>
  <IonTextarea inputmode="numeric"></IonTextarea>
</IonItem>

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>

note

inputmode 属性はChrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode

enterkeyhint

enterkeyhint 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 enterkeyhint を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが enterkeyhint="search" であることを確認する必要があります。

enterkeyhint はグローバル属性であるため、通常の入力エレメントに加えて、ion-input や ion-textarea などのIonicコンポーネントでも使用できます。

使用可能な値のリストについては、 enterkeyhint Standard を参照してください。

Usage

JavaScript

<ion-item>
  <ion-label>Enter search query</ion-label>
  <ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>

Angular

<ion-item>
  <ion-label>Enter search query</ion-label>
  <ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>

React

<IonItem>
  <IonLabel>Enter search query</IonLabel>
  <IonInput enterkeyhint="search" type="search"></IonInput>
</IonItem>

Vue

<ion-item>
  <ion-label>Enter search query</ion-label>
  <ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>

note

enterkeyhint 属性は Chrome 77+ and iOS Safari 13.4+ のデバイスでサポートされています

ダークモード

デフォルトでは、キーボードテーマはOSによって決定されます。たとえば、iOSでダークモードが有効になっている場合、アプリケーションのCSSにダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。

モバイルWebブラウザやPWAでアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。

When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, see the Capacitor Keyboard Documentation.

アクセサリバーを非表示にする

ウェブベースのアプリケーションを実行すると、iOSはキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。

モバイルWebブラウザやPWAでアプリを実行する場合、アクセサリバーを非表示にする方法はありません。

When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, see the Capacitor Keyboard Documentation.

キーボードのライフサイクルイベント

スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。CapacitorとCordovaアプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントをListenします。モバイルブラウザやPWAで動作するアプリでは、サポートされていればVisual Viewport APIを使用することができる。Ionic Frameworkはこれらの両方のアプローチをラップし、window に ionKeyboardDidShow と ionKeyboardDidHide イベントを発行します。 ionKeyboardDidShow のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。

Usage

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

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

note

モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。