Virtual keyboard
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
virtualKeyboard は navigator インターフェイスの読み取り専用プロパティで、VirtualKeyboard インスタンスオブジェクトへの参照を返します。
仮想キーボード API が利用可能になると、タブレットやモバイル端末、ソノタノハードウェアキーボードが利用できない端末で、画面に仮想キーボードが表示されたり非表示になったりする際に、開発者はアプリケーションのレイアウトを制御できるようになります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 94 | 94 | | | 94 | | |
| DOM API | ||||||
| virtualKeyboardPolicy は HTMLElement インターフェイスのプロパティで、要素のコンテンツが編集可能な場合（input や textarea 要素、contenteditable 属性が設定された要素など）、タブレットやモバイル端末、その他ハードウェアキーボードが利用できない端末での画面に表示される仮想キーボードの動作を示す文字列を取得または設定します。 | 94 | 94 | | | 94 | |
VirtualKeyboard 実験的 VirtualKeyboard API の VirtualKeyboard インターフェイスは、タブレット、携帯電話、またはハードウェア キーボードが使用できないその他のデバイスなど、画面上の仮想キーボードを備えたデバイスで役立ちます。 | 94 | 94 | | | 94 | |
boundingRect 実験的 VirtualKeyboard インターフェイスのboundingRect プロパティには、Web ページをオーバーレイする画面上の仮想キーボードの位置とサイズを示す DOMRect が含まれています。 | 94 | 94 | | | 94 | |
| VirtualKeyboard インターフェイスの geometrychange イベントは、画面上の仮想キーボードが表示状態と非表示状態の間で切り替わるときに発生します。 | 94 | 94 | | | 94 | |
hide 実験的 VirtualKeyboard インターフェイスの Hide() メソッドは、画面上の仮想キーボードをプログラムによって非表示にします。 これは、ページが VirtualKeyboard_API を使用して独自の仮想キーボード ロジックを実装する必要がある場合に便利です。 | 94 | 94 | | | 94 | |
overlaysContent 実験的 VirtualKeyboard インターフェイスの overlaysContent プロパティを使用すると、ビューポートのサイズを縮小してスペースを確保することで、ブラウザーが画面上の仮想キーボードを処理する自動方法をオプトアウトできます。 | 94 | 94 | | | 94 | |
show 実験的 VirtualKeyboard インターフェイスの show() メソッドは、プログラムによって画面上の仮想キーボードを表示します。 これは、ページが独自の仮想キーボード ロジックを実装する必要がある場合、特に contenteditable 要素で仮想キーボードを制御するで説明されている contenteditable 要素で virtualkeyboardpolicy 属性を使用する場合に便利です。 | 94 | 94 | | | 94 | |
| その他 | ||||||
| virtualkeyboardpolicy はグローバル属性で、列挙型の属性です。要素のコンテンツが編集可能である要素（例えば、input または textarea 要素、あるいは contenteditable 属性が設定されている要素）に指定された場合、タブレット、携帯電話、その他のハードウェアキーボードを利用できない端末などで、画面に表示される仮想キーボードの動作を制御します。 | 94 | 94 | | | 94 | |
基本構文
navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.show();
navigator.virtualKeyboard.addEventListener('geometrychange', (e) => {
console.log('Keyboard area:', e.target.boundingRect);
});実務での使いどころ
-
Virtual keyboard の活用
Experimental: これは実験的な機能です。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。