web-dev-qa-db-ja.com

Google Chrome Mobile Emulator:画面キーボードに表示する方法

Chromeのモバイルエミュレーションツールを使用してWebサイトのモバイルバージョンをデバッグしていますが、テキストフィールドを選択するときに画面上のキーボードをポップアップさせる方法がわかりません。

テキストボックスをクリックしましたが、キーボードがポップアップしません。モバイルデバイスでこれを行うと、既定の入力方法(キーボード)がポップアップ表示され、入力できるようになります。

これを複製する方法はありますか?

74
Aaron Hellman

最新のChrome開発者ツールには、さまざまなデバイス状態のエミュレートのサポートが追加されています。

  • デフォルトのブラウザUI
  • Chromeナビゲーションバーを使用
  • キーボードを開いた状態で

ドキュメント によると、そのような機能は「Nexus 5Xなどのサポート対象デバイス」をエミュレートする場合にのみ使用可能です。

この機能をサポートするエミュレートされたデバイスの完全なリストは、 Chromium source-code にあります。現在、以下でのみサポートされています。

  • ネクサス5
  • Nexus 5X

エミュレートされたキーボードとナビゲーションバーは単なる静的な画像であり( source-codeディレクトリ で確認できます)、インタラクティブな動作は含まれていません。これは画面サイズをシミュレートするのに十分な方法ですが、完全なエミュレーションではありません。

Screenshot of Chrome Developer Tools

114

最も近いのは、「Chrome Virtual Keyboard」の仮想キーボード拡張機能を使用することです

注:作業中のSencha Touchアプリで使用する場合、タッチイベントを使用するように設定する必要がありました。

他にも多数ありますので、chrome拡張機能エリアで「仮想キーボード」を検索し、好きなものを選択してください。

14
AnthonyVO