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

javascript jquery ios ipad bluetooth

16,151

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.

16,151

Author by

Sean N.

Updated on June 05, 2022

Comments

Sean N. almost 2 years

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>