What is the best cross-browser and cross-platform way to detect hardware keyboard presence with javascript?
6 Answers
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.
-
2Very clever, I ended up using this solution in my own application. Thank you! Commented Dec 21, 2018 at 2:14
-
-
4This is a reliable solution with one major dependency: the user needs to type something first. The holy grail is to reliably detect whether the user has only a software keyboard when the user lands on the page, before they do any typing.– thdoanCommented Jun 25, 2022 at 1:10
-
This won’t work if the user switches from a virtual keyboard to a physical (or vice versa) while the app is open – I think on tablets this is a realistic issue. Would be pretty hard for the user to figure out what’s going on – especially if the page was open for a long time (say, an installed PWA). Commented Mar 13, 2023 at 12:06
-
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
}
-
28
-
5Well, what would you do if an iPad has a keyboard attached to it? It sounds like a lot of code to show a simple icon. Commented Sep 18, 2013 at 19:47
-
1Many blackberry devices have both touch screen and physical keyboard Commented Dec 7, 2017 at 12:14
-
I assume many touch-screen PCs may have an issue with this, but at least it is a way to detect some of the newer iPads (which previous Regex check solutions do not seem to work with, specifically in the mobile Safari browser), so +1 for the creative solution– BroperCommented Aug 31, 2022 at 18:34
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 */
)
-
2I am making a game that by default uses keyboard to control, but I want to detect if there is no keyboard present so I can put on screen controls.– PeteCommented May 10, 2018 at 18:08
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 )
})
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")
}
-
5This won't tell you what kind of keyboard it is (hardware or virtual) Commented Apr 9, 2021 at 19:52
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?
-
1But can you imagine if every page facebook asked "Do you have hardware keyboard?" :D Commented Sep 18, 2013 at 19:09
-
4
-
1It is uncomfortable, even saving it to a database, if the user logs first from pc and then to phone? It is not a good solution... Commented Sep 18, 2013 at 19:26
-
3Yes maybe uncomfortable, but I would recommend you to study something about HTTP cookies, then you will know that cookies are unique per browser. Commented Sep 18, 2013 at 19:34
-
5
Ctrl
orAlt
?