How to detect a physical keyboard?

I have an Ionic React app that provides keyboard shortcuts. When users go to the main screen, I want to show information about keyboard shortcuts if the device has a physical keyboard. But for mobile devices without a keyboard, there is no need to show such info.

Is there some way to detect whether there is a physical keyboard?

For desktop PCs, I can check the platform, and if it is not Android or iOS, show the info. But I want to differentiate between mobile devices/tablets being used by themselves, and those with a physical keyboard connected. How can I do that?

I have looked into this, and as of yet, there is no standard way to do this.
You can detect various aspects of pointing devices using CSS media queries, but unfortunately not anything to do with keyboards.

One option is to measure the average length of keypresses.
However, that requires the user to have typed at least a few characters already.

UPDATE:
My answer was in relation to a pure JavaScript way.
As rapropos says, a Capacitor plugin could do this using native code.

1 Like

I don’t know if there is a Capacitor plugin that can do this, but I’m cautiously optimistic that some enterprising soul could make one, as I believe the underlying OS support exists.

On Android, since the beginning of time, there is a keyboard property in the Configuration object. For iOS, since v14, I think a non-null GCKeyboard.coalesce indicates the presence of an external keyboard.

1 Like