Google Chrome Mobile Emulator: How to show on screen keyboard

google-chrome mobile google-chrome-devtools
Aaron Hellman picture Aaron Hellman · Apr 14, 2015 · Viewed 75.6k times · Source

I'm debugging a mobile version of our website through Chrome's Mobile Emulation tool, but cannot figure out how to have an on-screen keyboard pop up when selecting a text field.

I have clicked on the text box, but no keyboard pops up. If I do this on a mobile device, the default input method (keyboard) pops up and allows me to type.

Is there a way to replicate this?

Answer

Denilson Sá Maia picture Denilson Sá Maia · Mar 12, 2016

Chrome developer tools has limited support for emulating different device states:

  • Default browser UI
  • With Chrome navigation bar
  • With opened keyboard

According to the documentation, such feature is only available when emulating “supported devices like the Nexus 5X”.

The complete list of emulated devices that support this feature can be found at Chromium devtools-frontend source-code (mirror on GitHub). Currently, it is only supported by:

  • Nexus 5
  • Nexus 5X

Note that the emulated keyboard and navigation bar are just static pictures (as you can see at the source-code directory) and don't contain any interactive behavior. It is a good enough way to simulate the screen size, but it is not a perfect emulation.

Screenshot of Chrome Developer Tools

Related questions

Chrome "Emulate Touch Events" not working

I've enabled the "Emulate Touch Events" option in Chrome's Developer Tools. I set up a simple test program that alerts when I touch a <div>. The program works fine on my Galaxy Nexus, but when I click on …

Read More
Is there any way in Android to force open a link to open in Chrome?

I'm currently testing a webapp developed with lots of jQuery animations, and we've noticed really poor performance with the built-in web browser. While testing in Chrome, the performance of the webapp is unbelievably quicker. I'm just wondering if there was …

Read More
How does Chrome's "Request Desktop Site" option work?

For iOS google chrome, when a user hits the "Request desktop site" button what does the browser do to try to bring up a desktop site? I imagine some sort of header on the request that sites are looking for, …

Read More