How to bring up mobile keyboard in chrome dev tools?

Question

I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?

So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.

Solution

Update: 🙁 Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.

---

Original answer

You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:

However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.

To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.

See: Test Responsive and Device-specific Viewports

Comments

[alain.janinm]

Possible duplicate of Google Chrome Mobile Emulator: How to show on screen keyboard

[Garbee]

Do not use the Android Emulator for debugging. It is missing some key GL stuff used for rendering which makes it off-by-default and you can't really get Chrome in them easily. The stock browser that is also in them, are from the shipping time of that version of Android. So it could easily be very out-of-date and therefor your application may not work properly inside of that as it would an actual device with an updated system stack.

[Steve Bennett]

This doesn't seem to be an option anymore? Clicking the rotate icon doesn't bring up a menu, it simply rotates. Or did I miss something?

[Darian Brown]

I can only see the keyboard option when selecting the Nexus 5 as my device. All other devices simply rotate upon clicking the button.

[Jérôme Oudoul]

Using Chrome 75 in 2019 and the keyboard (through the Screen options icon) seems to be only available when choosing the Nexus 5 indeed. This virtual keyboard is not active though. Can't click the letters to input something.

[aristotaly]

getting the same issue . keyboard does not react to typing. more over to not reacting to type="number" input types (i would expect to see the numpad )

[Hasan Tezcan]

Useless! this feature needs an immediate improvement

[Pulkit Aggarwal]

We can see keyboard for Nexus 5 as well