Menu
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.
505
Use keyboard event to detect if the user have keyboard or not (he/she may press it). Save it in localStorage and the browser will remember it for the next time. Keyboard in JS is accessible via browser APIs which delegate to OS APIs and it's not possible to tell if there's a physical keyboard.
With the ontouchstart event; Keyboard in JS is accessible via browser APIs which delegate to OS APIs and it's not possible to tell if there's a physical keyboard.
Approach: Unfortunately, currently there is no direct way to detect if a virtual keyboard appears on the screen using JavaScript. However, there are a few indirect ways using which we can detect when a virtual keyboard appears on the device’s screen. If a virtual keyboard appears on the screen, the height of the screen would be changed.
Basically, the JavaScript file of the keyboard renderers HTML structure for the keyboard. So, you don’t need to create anything manually for the keyboard. Anyhow, the keyboard keys icons depend upon Google Material icons. Therefore, load the Google material Icons CSS and keyboard JavaScript file into the head tag of your HTML page.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
