メインコンテンツまでスキップ
Version: v6

Keyboard

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

inputmode

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

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

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

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

Usage

<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-inpution-textarea などのIonicコンポーネントでも使用できます。

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

Usage

<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でアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。

CapacitorまたはCordovaでアプリを実行しているとき、キーボードを特定のテーマで表示させることができます。この設定の詳細については、 Capacitor Keyboard Documentation を参照してください。

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

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

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

CapacitorやCordovaでアプリを実行しているときは、アクセサリバーを隠すことができます。この設定の詳細については、 Capacitor Keyboard Documentation を参照してください。

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

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

Usage

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

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