iPad Bluetooth keyboard returns keycode of 0 for any key with onKeyUp

Question

Some clients have been reporting issues when using their iPad Bluetooth keyboards for entering text into one of our internal sites. Mainly pressing enter on a certain input would work fine when using desktop or the iPad on screen keyboard, but not when using a Bluetooth keyboard connected to the iPad.

Upon investigation it appears that any input to an onKeyUp returns 0 as the keycode when connected to a Bluetooth keyboard on the iPad. The demo works fine, however when using the onscreen keyboard it doesn't work because of the keycode returning 0. I created this jsFiddle to demonstrate. It was tested on both Chrome and Safari for iPad with the same results of working fine with onKeyPress but returning only 0 with onKeyUp.

$('#inputKeyUp').keyup(function (event){
	$("#outputKeyUp").text("Key Up Key: " + event.which);
});

$('#inputKeyPress').keypress(function (event){
	$("#outputKeyPress").text("Key Press Key: " + event.which);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputKeyUp">keyup</textarea>
<div id="outputKeyUp">Key Up Key:</div>
<b/>
<textarea id="inputKeyPress">keypress</textarea>
<div id="outputKeyPress">Key Press Key:</div>

EDIT: just reported the bug to Apple. We will see if anything comes of it.

Chronister

Just tried it myself, same issue (iOS 9). Looks like this has been an isue for a while: #18985617. It might be a bug in Safari. Does the same thing happen on a different browser? – Gearbox

@Gearbox yes, I tested it in Chrome as well – Chronister

Answer 1

Testing study

I did some testing on this just now and discovered that on the keyUp event when using a Bluetooth keyboard on iOS Safari, the only keys that give any sort of proper feedback in terms of the properties e.key, e.charCode, e.keyCode and e.which are the following keys:

• Escape
• Up arrow
• Left arrow
• Right arrow
• Down arrow

All other keys return the following:

{
    key: "Dead",
    charCode: 0,
    keyCode: 0,
    which: 0
}

These special keys (escape and arrow keys) only return a different value on the e.key property according to the syntax UIKeyInput{PascalCasedKeyName}:

• UIKeyInputEscape
• UIKeyInputUpArrow
• UIKeyInputLeftArrow
• UIKeyInputRightArrow
• UIKeyInputDownArrow

Summary

On iOS, the only keys you can identify on the keyUp event, based on my quick study, are Escape and the four Arrow keys, by matching their name on the e.key property. These values also appear on the keyDown event.

If you still need to wait until the keyUp event fires for your applications, and you need to match keys other than these special ones, the only solution I can come up with is to use a keyDown event for capturing the key, but then listen for the keyUp event inside that keyDown event like so:

el.addEventListener("keydown", e => {
    if (e.which === 13) // Enter key, or which ever key code you'd like
        el.addEventListener("keyup", function keyUp(e) {
            el.removeEventListener("keyup", keyUp, false) // Memory clean-up

            // Your code here
        }, false)
}, false)

Furthermore

After a quick search for "UIKeyInput" I discovered that UIKeyInput is "a set of methods a subclass of UIResponder uses to implement simple text entry". (Apple's Developer Documentation) This would explain the special syntax of these key names.

Rintoul

Answer 2

This is a workaround for the enter key in the keyup event.

if (event.type === 'keyup') {
    //this is to handle the enter button on an ipad bluetooth keyboard
    if (event.key === 'Enter') {
        event.which = event.keyCode = 13;
    }
}

Whiteside