jquery - How to detect arrow keys using JavaScript on iPad with Bluetooth keyboard

I cannot find a way to detect arrow keys in a text field in Safari and Chrome on an iPad when a bluetooth keyboard is used.
Using this test HTML and JavaScript, touch the input field to give it focus.
Using the arrow keys nothing happens, but type letters and numbers and the keydown events occur.

<!DOCTYPE html>
<html>
<head>
  <title>Test page.</title>
  <script src=".1.4/jquery.min.js"></script>
</head>
<body>
  <form>
    <input id="input" style="width: 600px;" type="textarea" />
  </form>
  <div id="keydisp" style="width 600px; height: 50px"></div>
  <script type="text/javascript">
    $(document).keydown(function(event) {
      var keyCode = event.which;
      document.getElementById("keydisp").innerHTML = "key pressed: " + keyCode;
    });
  </script>
</body>
</html>

Is it possible to detect the arrows?

<!DOCTYPE html>
<html>
<head>
  <title>Test page.</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <form>
    <input id="input" style="width: 600px;" type="textarea" />
  </form>
  <div id="keydisp" style="width 600px; height: 50px"></div>
  <script type="text/javascript">
    $(document).keydown(function(event) {
      var keyCode = event.which;
      document.getElementById("keydisp").innerHTML = "key pressed: " + keyCode;
    });
  </script>
</body>
</html>

Is it possible to detect the arrows?

Share Improve this question edited Jan 29, 2017 at 17:26 user5870134 asked May 13, 2015 at 16:58 Sean N. 9732 gold badges10 silver badges23 bronze badges

1 try checking window.event, not just the event that gets passed. ex: var keyCode = event.which || window.event; – basher Commented May 13, 2015 at 17:05
@basher That will not help. According to the jQuery keydown documentation jQuery normalizes the .which property so you can reliably use it to retrieve the key code. – Sean N. Commented May 14, 2015 at 16:32
Is the even even firing? Add this to the begining of your function and see if you get the pop up. alert('keydown event'); I would do this myself but I left my iPad at work. Also; does the event fire for printable characters (A-Z, numbers, etc..)? – Andrew Bonsall Commented May 24, 2016 at 0:26
@AndrewBonsall I have tried doing keydown and other events. It does fire for other characters. Events for Arrow keys and tabs don't work. – Shiv Deepak Commented May 24, 2016 at 1:04
3 I'm sorry I just found this, which based on what you have told me, nothing has changed http://stackoverflow.com/questions/14959048/how-to-detect-key-down-event-for-arrow-key-on-textarea – Andrew Bonsall Commented May 24, 2016 at 1:08

| Show 5 more comments

4 Answers 4

Sorted by: Reset to default 13 +225

I understand that this might seem like a grim answer and I apologise if it is.

I have struggled with this issue a few weeks ago and eventually gave up on it.
Countless hours of trying to get the arrow keys on the iPad to fire the onkeydown event did seem to work at all, it was like they weren't even being pressed.

A good alternative for a game (or something like that) is to use the WSAD keys, this was what I did.

The codes for the WSAD keys are:

w: 87,
s: 83,
a: 65,
d: 68

This is how you would normally detect when the WSAD keys have been pressed:

$(document).on("keydown", function(event) {
  if (event.which == 87) {
    // W key Has Been Pressed
  } else if (event.which == 83) {
    // S key Has Been Pressed
  } else if (event.which == 65) {
    // A key Has Been Pressed
  } else if (event.which == 68) {
    // D key Has Been Pressed
  }
  // prevent the default action
  // event.preventDefault(); // This is optional.
});

The codes for the arrow keys are:

up: 38,
down: 40,
left: 37,
right: 39

This is how you would normally detect when the arrows keys have been pressed:

$(document).on("keydown", function(event) {
  if (event.which == 37) {
    // Left Arrow Has Been Pressed
  } else if (event.which == 38) {
    // Up Arrow Has Been Pressed
  } else if (event.which == 39) {
    // Right Arrow Has Been Pressed
  } else if (event.which == 40) {
    // Down Arrow Has Been Pressed
  }
  // prevent the default action
  event.preventDefault();
});

NOTE: you can only use the onkeydown event to check if the the arrow keys have been pressed.

You can also use var key = event.keyCode ? event.keyCode : event.which;
Quoting Peter Darmis:

Versions of Opera before 10.50 messes up by returning non-zero event.which values for four special keys (Insert, Delete, Home and End), meaning using event.keyCode may be more "fail safe" across older browsers.
Source

Quoting the jQuery api:

The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input. For more detail, read about event.charCode on the MDN.
Source

Good luck, and all the best.

For most browsers you could use something like

function returnKeyCode(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which;
  switch (keyCode) {
    case 37:
      alert(e.code ? e.code : e.key);
      break;
    case 38:
      alert(e.code ? e.code : e.key);
      break;
    case 39:
      alert(e.code ? e.code : e.key);
      break;
    case 40:
      alert(e.code ? e.code : e.key);
      break;
    default:
      alert(e.code ? e.code : e.key);
  }
}
window.addEventListener("keydown", function (e) {
  returnKeyCode(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But if you would like to be more thorough take a look at the following snippet. Before that take a look on KeyboardEvent attributes that are used and will be deprecated, or are deprecated.

PS: check the difference in event.code when using jQuery(red) and when javascript(blue).

$(document).on("keydown", function(event) {
  $("#keydown").append("<br><span>keyCode</span>= " + event.keyCode);
  $("#keydown").append("<br><span>key</span>= " + event.key);
  $("#keydown").append("<br><span>code</span>= " + event.code);
  $("#keydown").append("<br><span>which</span>= " + event.which);
  $("#keydown").append("<br><span>charCode</span>= " + event.charCode);
  $("#keydown").append("<br><span>char</span>= " + event.char);
  $("#keydown").append("<br><span>keyIdentifier</span>= " + event.keyIdentifier);
}).on("keypress", function(event) {
  $("#keypress").append("<br><span>keyCode</span> = " + event.keyCode);
  $("#keypress").append("<br><span>key</span> = " + event.key);
  $("#keypress").append("<br><span>code</span> = " + event.code);
  $("#keypress").append("<br><span>which</span> = " + event.which);
  $("#keypress").append("<br><span>charCode</span> = " + event.charCode);
  $("#keypress").append("<br><span>char</span>= " + event.char);
  $("#keypress").append("<br><span>keyIdentifier</span>= " + event.keyIdentifier);
}).on("keyup", function(event) {
  $("#keyup").append("<br><span>keyCode</span> = " + event.keyCode);
  $("#keyup").append("<br><span>key</span> = " + event.key);
  $("#keyup").append("<br><span>code</span> = " + event.code);
  $("#keyup").append("<br><span>which</span> = " + event.which);
  $("#keyup").append("<br><span>charCode</span> = " + event.charCode);
  $("#keyup").append("<br><span>char</span>= " + event.char);
  $("#keyup").append("<br><span>keyIdentifier</span>= " + event.keyIdentifier);
});
window.addEventListener("keydown", function (event) {
  $("#keydown").append("<br><i>keyCode</i>= " + event.keyCode);
  $("#keydown").append("<br><i>key</i>= " + event.key);
  $("#keydown").append("<br><i>code</i>= " + event.code);
  $("#keydown").append("<br><i>which</i>= " + event.which);
  $("#keydown").append("<br><i>charCode</i>= " + event.charCode);
  $("#keydown").append("<br><i>char</i>= " + event.char);
  $("#keydown").append("<br><i>keyIdentifier</i>= " + event.keyIdentifier);
});
window.addEventListener("keypress", function (event) {
  $("#keypress").append("<br><i>keyCode</i>= " + event.keyCode);
  $("#keypress").append("<br><i>key</i>= " + event.key);
  $("#keypress").append("<br><i>code</i>= " + event.code);
  $("#keypress").append("<br><i>which</i>= " + event.which);
  $("#keypress").append("<br><i>charCode</i>= " + event.charCode);
  $("#keypress").append("<br><i>char</i>= " + event.char);
  $("#keypress").append("<br><i>keyIdentifier</i>= " + event.keyIdentifier);
});
window.addEventListener("keyup", function (event) {
  $("#keyup").append("<br><i>keyCode</i>= " + event.keyCode);
  $("#keyup").append("<br><i>key</i>= " + event.key);
  $("#keyup").append("<br><i>code</i>= " + event.code);
  $("#keyup").append("<br><i>which</i>= " + event.which);
  $("#keyup").append("<br><i>charCode</i>= " + event.charCode);
  $("#keyup").append("<br><i>char</i>= " + event.char);
  $("#keyup").append("<br><i>keyIdentifier</i>= " + event.keyIdentifier);
});
$(document).on("click", function() {
$("span, i").remove();
});

span {
  color:#f00;
}
i {
  color:#00f;  
}
.container {
display:inline-flex;
width:100%;
height:auto;
align-items: stretch;
align-content: center;
justify-content: center;
flex-direction: row;
}
.container div{
align-self: stretch;
width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="keydown">Keydown Event</div>
<div id="keypress">Keypress Event</div>
<div id="keyup">Keyup Event</div>
</div>

This might be an additional or something to what the others have given. In this example, key W is being checked if pressed.

$(document).keydown(function(e){
     var event = e.which || e.keyCode;
     if (event == 87){ alert("C was Pressed."); }
});

You can check if keyCode or which is usable, depending on your browser type and version.

For more Keyboard Events Info.

For Event Keycodes.

The problem is probably caused by default behaviour of pressing arrow keys in a iPad. Normally arrow keys scroll the document. But when the text field is focused, the default is prevented. It may be in the implementation of the browser which also stops the bubbling.

Instead of listening to document events, you can also listen to input field's events. See Fiddle. I don't have a bluetooth keyboard so I can't test it. Sorry if it doesn't work.

$(document).keydown(
function (event) {
        var keyCode = event.which;
        document.getElementById("keydisp").innerHTML = "key pressed: " + keyCode;
});

$("input").keydown(
function (event) {
        var keyCode = event.which;
        document.getElementById("keydisp").innerHTML = "key pressed: " + keyCode;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<input type="textarea" id="input" autocorrect="off" autocapitalize="off" style="width: 600px;">
<div id="keydisp" style="width 600px; height: 50px"></div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How to detect arrow keys using JavaScript on iPad with Bluetooth keyboard - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)