キーボード

モバイルアプリと PWA を構築する際に、開発者が直面する一般的な障害の 2 つは、画面上のキーボードの存在をカスタマイズし、考慮することです。このガイドでは、アプリケーションで画面上のキーボードを管理するために使用できるさまざまなツールを紹介いたします。

inputmode

inputmode 属性を使用すると、開発者は入力に入力できるデータの種類を指定できます。これにより、ブラウザはユーザーが入力する可能性のあるデータに関連するボタンを含むキーボードを表示するようになります。たとえば、inputmode="email" は、@ キーと、メールの入力を最適化するためのその他の機能を含むキーボードを表示します。

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

特定のデータ型を要求する入力には、代わりにtype 属性を使用する必要があります。たとえば、メールアドレスを要求する入力には、inputmode を指定するのではなく、type="email" を使用する必要があります。これは、入力されるデータが常にメールアドレスの形式になるためです。一方、入力がメールアドレスまたはユーザー名を許可する場合、入力されるデータが常にメールアドレスではないため、inputmode="email" を使用することが適切です。

受け入れられる値の一覧については、inputmode ドキュメントを参照してください。

使用方法

注記

inputmode 属性は、Chrome 66 以降と iOS Safari 12.2 以降を実行しているデバイスでサポートされています：https://caniuse.dokyumento.jp/#search=inputmode

enterkeyhint

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

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

受け入れられる値の一覧については、enterkeyhint 標準を参照してください。

使用方法

注記

enterkeyhint 属性は、Chrome 77 以降と iOS Safari 13.4 以降を実行しているデバイスでサポートされています。

ダークモード

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

モバイルウェブブラウザまたは PWA でアプリを実行している場合、キーボードを特定のテーマで表示するように強制する方法は存在しません。

Capacitor または Cordova でアプリを実行している場合、キーボードを特定のテーマで表示するように強制できます。この設定の詳細については、Capacitor キーボードドキュメントを参照してください。

アクセサリバーの非表示

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

モバイルウェブブラウザまたは 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}`);
});

注記

モバイルウェブブラウザまたは PWA で実行されているアプリの場合、キーボードライフサイクルイベントは Chrome 62 以降と iOS Safari 13.0 以降でのみサポートされています。