I'm having trouble getting the keyup(), keydown() and keypress() events to work on an iPad. The trouble occurs when I have a wireless bluetooth keyboard connected and try typing using the keyboard -- the events do not fire. I tried with both Safari and Chrome on the iPad (iOS 6.1). This same HTML works fine in Firefox, Safari, Chrome, etc on the desktop. Is there any way to change this code to make it work on the tablet? I checked document.activeElement, and it seems to be the document body, which is correct.
<html>
<head>
<script src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(document).keyup(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keyup " + event.which) + "<br>";
});
$(document).keydown(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keydown " + event.which) + "<br>";
});
$(document).keypress(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keypress " + event.which) + "<br>";
});
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
I'm having trouble getting the keyup(), keydown() and keypress() events to work on an iPad. The trouble occurs when I have a wireless bluetooth keyboard connected and try typing using the keyboard -- the events do not fire. I tried with both Safari and Chrome on the iPad (iOS 6.1). This same HTML works fine in Firefox, Safari, Chrome, etc on the desktop. Is there any way to change this code to make it work on the tablet? I checked document.activeElement, and it seems to be the document body, which is correct.
<html>
<head>
<script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(document).keyup(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keyup " + event.which) + "<br>";
});
$(document).keydown(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keydown " + event.which) + "<br>";
});
$(document).keypress(function(event) {
document.getElementById("output").innerHTML = document.getElementById("output").innerHTML + ("keypress " + event.which) + "<br>";
});
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
- I quickly googled around, someone else had some luck with using onKeyPress instead. – domdomcodecode Commented Jan 23, 2014 at 0:06
- @d_ominic do you have a link to the page you found? I tried changing the code to <body onkeypress="alert('hello');">, and it still doesn't trigger on the iPad. I don't want to put a text input field on the page because that will cause the onscreen keyboard to pop up. – Sean N. Commented Jan 23, 2014 at 20:42
- This post is identical to the problem I'm having: javascript-read-keypresses-on-tablet – Sean N. Commented Jan 23, 2014 at 20:51
- stackoverflow./questions/18985117/… – domdomcodecode Commented Jan 23, 2014 at 22:37
2 Answers
Reset to default 6Well apparently on iOS, the keyboard will not work unless a text field has focus, period.
To work around this, I'm going to need to add a hidden text field to the HTML. Something like this:
<div style="overflow: hidden; position: relative; width: 1px; height: 1px; left: -500px">
<input id="input" type="textfield" autocorrect="off" autocapitalize="off">
</div>
Now the problem is, there is no way in JavaScript to give the hidden input focus automatically on an iPad. So I'm going to have to add some sort of button that has to be physically clicked on to give the hidden input field focus. See here.
<input type="button" value="Click here first" onclick="document.getElementById('input').focus();">
I hate this. If anyone can find a better solution, please let me know.
Using jQuery, if you do it with keydown, it works
$("#selector").on("keydown", function(event) { console.log(event.which); });
you get the proper key object returned in the event, with keyCode and which. Weird that it sends a keyup event, but all the relevant data is set to 0.