開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。
開発者は、 inputmode 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 inputmode="email" を指定すると、 @ キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。
inputmode はグローバル属性であるため、通常の入力エレメントに加えて、ion-input や ion-textarea などのIonicコンポーネントでも使用できます。
特定のデータ型を必要とする入力では、代わりに type 属性を使用する必要があります。たとえば、emailの入力では、 inputmode. を指定するのではなく、type="email"
を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に type="email" になるとは限らないため、 inputmode=”email” を使用するのが適切です。
使用可能な値のリストについては、inputmode Documentationを参照してください。
- 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>
enterkeyhint 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 enterkeyhint を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが enterkeyhint="search" であることを確認する必要があります。
enterkeyhint はグローバル属性であるため、通常の入力エレメントに加えて、ion-input や ion-textarea などのIonicコンポーネントでも使用できます。
使用可能な値のリストについては、 enterkeyhint Standard を参照してください。
- 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+ 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 のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。
- JavaScript
- Angular
- React
- Vue
window.addEventListener('ionKeyboardDidShow', ev => {
const { keyboardHeight } = ev;
});
window.addEventListener('ionKeyboardDidHide', () => {
});
import { Platform } from '@ionic/angular';
...
constructor(private platform: Platform) {
this.platform.keyboardDidShow.subscribe(ev => {
const { keyboardHeight } = ev;
});
this.platform.keyboardDidHide.subscribe(() => {
});
}
import { useKeyboardState } from '@ionic/react-hooks/keyboard';
...
const { isOpen, keyboardHeight } = useKeyboardState();
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}`);
});
モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。