How do I detect hardware keyboard presence with javascript?

Question

What is the best cross-browser and cross-platform way to detect hardware keyboard presence with javascript?

Answer 1

This may be an old question, but a few months ago, I was looking for a solution to this myself. I was building a messaging system which should send the message when someone hits Return on their physical keyboard, but inserts a newline when someone hits Return on a virtual keyboard. The way I solved it was by counting the time between keydown and keyup events and getting the average when Return was hit.

I finally got around to documenting it on my blog here.

Answer 2

Could you try the theoretical opposite? Instead of trying to detect keyboard hardware, why not try to detect a touch screen? With the ontouchstart event;

if ('ontouchstart' in document.documentElement) {
    // show icon
}

Answer 3

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. I can cut the cord off of my physical keyboard right now, turn on virtual keyboard, click on the on-screen buttons with my mouse and the browser will still trigger every keyboard event the scripts are listening to. Form browsers's/JS's perspective the virtual keyboard is indistinguishable from a physical one.

And what does "presence" even mean? If I have a phone with a touch screen and slide-out keyboard do you expect the browser to trigger some kind of "keboardIn"/"keyboardOut" event? Same with cable plug-in/out? :)

If your app absolutely requires a physical keyboard just inform/ask the user.

Edit - after clarification by OP:

You know the facebook chat? You send messages simply by pressing "Enter", I have to show users that do not have a keyboard button to replace the "Enter" key.

So just make a form with text input and listen to the input/form events. Most (every?) soft keyboards have some kind of "Done", "Ready" or similar button. You don't need to know if the "keyCode" is equal to "13", but detect that the user has an intent to submit what he has typed. Or, as the last resort, detect f the device i touch-enabled and display the button then. ( if('ontouchstart' in document.documentElement)/* show touch sbmit button */ )

Answer 4

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.

var app = this;
app.hasKeyboard = false;
this.keyboardPress = function() {
    app.hasKeyboard = true;
    $(window).unbind("keyup", app.keyboardPress);
    localStorage.hasKeyboard = true;
    console.log("has keyboard!")
}
$(window).on("keyup", app.keyboardPress)
if(localStorage.hasKeyboard) {
    app.hasKeyboard = true;
    $(window).unbind("keyup", app.keyboardPress);
    console.log("has keyboard from localStorage")
}

Answer 5

When a virtual keyboard pops up on the screen on a mobile device, the height of your application reduces in order to accommodate the virtual keyboard. So, what you can do is that you can add an event listener that checks whether the screen has resized as the user focuses on the input field.

You can add this functionality using the resize event listener when the input field is focused:

const inputField = document.querySelector(".my-input");

const virtualKeyboardDetected = () => alert("Virtual keyboard detected!");

inputField.addEventListener("focusin", () => {
    window.addEventListener("resize", virtualKeyboardDetected )
})
inputField.addEventListener("focusout", () => {
    window.removeEventListener("resize", virtualKeyboardDetected )
})

Answer 6

if (confirm('Do you have hardware keyboard?')) {

} else {

}

Edit according to description in comments under question:

What about support 'Enter' everytime and add 'Send' icon only for touch screens (What's the best way to detect a 'touch screen' device using JavaScript?) and as a 'hover' pseudoclass for mouse?