HTML5 detect the presence of a physical keyboard in javascript

Question

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

The idea is that since the physical keyboard window.onkeydown cannot be undefined (instead of null ). But because of the virtual keyboard, I would suggest that this is not so. I have not tested.

My goal is to replace input[type='number'] Online Timer with wheels if the user does not have a keyboard.

Answer 1

This becomes very difficult with devices such as Microsoft Surface, which come with a keyboard, mouse, and touch screen. And you can mix all 3 input modes at any time or add another input method, for example, with a stylus.

Microsoft takes the approach of abstracting input events as "pointer events." This model has been shipped to W3C . This should give you an idea of ​​input control trends.

However, I find it convenient to monitor whether touch access is available and work in accordance with the assumption that, if so, the user will use touch input for at least some time. This can lead to design decisions to eliminate those things that are completely untouchable, although this may mean compromising mouse / keyboard functions.

In your specific case, I will consider in detail the question of whether to replace input[type=number] with a user control. Most touch devices are fairly modern, and many have custom versions of standard HTML inputs.

Also be aware of accessibility scenarios that seem to support native out-of-box controls.

If you decide to implement a user control, I would advise you to detect touch functions and show your own control regardless of whether other input mechanisms are present. This means that the user control (at least) supports the touch / keyboard / mouse.

Here's my current touch test (with a disclaimer that it might break tomorrow and, of course, has not been tested on every device):

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

Answer 2

I see two approaches.

The first approach would be to listen to each mouse and keyboard event. A user with a mouse will probably also have a keyboard. A user going to the site is likely to move the mouse.

The second approach is to test the User Agent to find out what works in the operating system, and to assume that the Android and iOS devices do not have a keyboard. In Windows 8, I don’t see how User Agent can help, since Windows 8 works on both tablets and desktops / laptops.

I would rather have a more elegant solution.

Answer 3

more reliably detect the touch screen and show a special widget; just make sure the keyboard is still used with your fancy widget for convenience.

Answer 4

You may be able to determine the type of keyboard by checking the operating system or even screen sizes. Android, iOS, and all devices with small screens usually do not have physical keyboards.