HTML5; detect presence of physical keyboard in Javascript

Question

What is the most reliable way to detect if a user has a physical keyboard?

An idea is that since there is no physical keyboard window.onkeydown could be undefined (instead of null ). But because of the virtual keyboard I'd suppose it to not be the case. I didn't test though.

My goal is to have input[type='number'] of an Online Timer to be replaced with wheel pickers if the user doesn't have a keyboard.

Answer 1

I see two approaches.

The first approach would be to listen to every mouse and keyboard events. A user having a mouse is likely to also have a keyboard. A user going to a website is likely to move the mouse.

The second approach is to check the User Agent to read what Operating System is running and assume that the Android and iOS devices don't posses any keyboard. For Windows 8 I don't see how the User Agent could help, since windows 8 runs on both tablets and desktops/notebooks.

I'd rather have a more elegant solution though.

Answer 2

This gets really tricky with devices like the Microsoft Surface, which come with a keyboard, mouse, and have a touch screen. And you may mix all 3 input modes at any given time, or add another input method like a stylus.

Microsoft is taking the approach of abstracting input events as "pointer events". This modelhas been submitted to the W3C . This should give you an idea of the trend in managing input.

Still, I find it's handy to see if touch is available and operate under the assumption that—if it is—the user will use touch input at least some of the time. This can lead to design decisions to eliminate things which are completely touch-unfriendly even though that may mean compromising on mouse/keyboard functionality.

In your specific case, I would take a hard look at whether or not you even need to replace input[type=number] with a custom control. Most touch devices are reasonably modern, and many have custom, touch-friendly versions of the standard HTML inputs.

Also keep in mind accessibility scenarios which native controls probably support well "out of the box".

If you decide to implement a custom control, then I would advise detecting touch features and showing your custom control whether or not other input mechanisms are present. This means ensuring that the custom control is (at minimum) touch/keyboard/mouse friendly.

Here's my current touch test (with the disclaimer that it could break tomorrow and certainly hasn't been tested on every device):

var supportsTouch = ("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

Answer 3

it's more reliable to detect a touchscreen and show the special widget then; just make sure the keyboard is still usable with your fancy widget for accessibility's sake.

Answer 4

You might be able determine the keyboard type by checking the operating system or even the screen dimensions. Android, iOS, and all devices with small screens tend not to have physical keyboards.