javascript - iPad Bluetooth keyboard returns keycode of 0 for any key with onKeyUp - Stack Overflow

Some clients have been reporting issues when using their iPad Bluetooth keyboards for entering text int

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=".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>

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./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 es of it.

Share Improve this question edited Aug 29, 2017 at 17:19 William Reed asked Aug 28, 2017 at 17:47 William ReedWilliam Reed 1,8641 gold badge19 silver badges31 bronze badges 2
  • 3 Just tried it myself, same issue (iOS 9). Looks like this has been an isue for a while: stackoverflow./questions/18985117/…. It might be a bug in Safari. Does the same thing happen on a different browser? – Sidney Commented Aug 28, 2017 at 17:57
  • @Sidney yes, I tested it in Chrome as well – William Reed Commented Aug 28, 2017 at 17:57
Add a ment  | 

2 Answers 2

Reset to default 5

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

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;
    }
}

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744336020a4569119.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信