JQuery keyup() keydown() and keypress() are not working with iPad and bluetooth keyboard

Question

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.com/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, Jan 23 '14 at 00:06
@d_ominic do you have a link to the page you found? I tried changing the code to , 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., Jan 23 '14 at 20:42
This post is identical to the problem I'm having: [javascript-read-keypresses-on-tablet](http://stackoverflow.com/questions/14340469/javascript-read-keypresses-on-tablet?lq=1) — Sean N., Jan 23 '14 at 20:51
http://stackoverflow.com/questions/18985117/onkeyup-event-in-safari-on-ios7-from-a-bluetooth-keyboard — domdomcodecode, Jan 23 '14 at 22:37

score 6 · Answer 1 · edited May 23 '17 at 11:45

Well 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.

score -1 · Answer 2 · answered Aug 27 '15 at 22:47

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.

JQuery keyup() keydown() and keypress() are not working with iPad and bluetooth keyboard

2 Answers2

Linked