I have been thinking about this a while now, and I can't figure a way to deal with it. Is there any way to detect if the user uses a virtual (software) keyboard or a traditional (hardware) keyboard?
The new Windows Surface has its own keyboard in the cover, and for Android / iPad there are a ton of different bluetooth keyboards.
So, do any of you have any input about this?
I'm aiming for Android, IOS & Windows Tablet/Phone.
Motivation: (very subjective)
When developing web applications for tablet/smartphone I have come to the understanding that it's easier - in many situations - to use a JavaScript keyboard instead of the OS's software keyboard.
Lets say you want to enter a PIN code. Instead of having a keyboard filling half of the screen:
Software (OS) keyboard:
|----------------|
| [ input] |
| |
|----------------|
| 1 2 3 4 5 |
| 6 7 8 9 0 |
|----------------|
JavaScript keyboard:
|----------------|
| [ input] |
| | 1 2 3| |
| | 4 5 6| |
| |_7_8_9| |
| |
| |
|----------------|
If you need to handle a lot of inputs, maybe you want to make an overlaying div with the inputs and use the software keyboard:
|----------------|
| P1 P2 P3 P4 |
| [inp 1][inp 2] |
|----------------|
| KEYBOARD |
| |
|----------------|
But if the user has their own hardware keyboard, we want to make the edit inline in place.
I have been looking around SO and found this post: iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari? ... but this seams to only work in IOS - not sure about browser.
I don't think overriding default onscreen keyboard is a good idea, and I'd recommend going with what Jani suggested - virtual keyboards adapt too.
But I'm sure it is possible to detect most keyboards with the resize event paired with focus on the field or by monitoring window.innerHeight (or some other [a-z]*Height) and comparing value before and after field focus.
This is a weird case of feature detection, so it will need plenty of experimentation. I wouldn't do it if I were you.