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

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 model has 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;