如何在带有蓝牙键盘的 iPad 上使用 JavaScript 检测箭头键答案

【问题标题】：How to detect arrow keys using JavaScript on iPad with Bluetooth keyboard如何在带有蓝牙键盘的 iPad 上使用 JavaScript 检测箭头键
【发布时间】：2015-07-25 02:33:50
【问题描述】：

当使用蓝牙键盘时，我无法在 iPad 上的 Safari 和 Chrome 的文本字段中检测箭头键。
使用此测试 HTML 和 JavaScript，触摸输入字段以使其获得焦点。
使用箭头键不会发生任何事情，但键入字母和数字会发生 keydown 事件。

<!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>

是否可以检测到箭头？

【问题讨论】：

尝试检查window.event，而不仅仅是通过的event。例如：var keyCode = event.which || window.event;
@basher 这无济于事。根据jQuery keydown 文档jQuery normalizes the .which property so you can reliably use it to retrieve the key code.
偶数是否触发？将此添加到函数的开头，然后查看是否弹出。 alert('keydown event'); 我自己会这样做，但我把 iPad 留在了工作中。还;事件是否会针对可打印字符（A-Z、数字等）触发？
@AndrewBonsall 我已经尝试过 keydown 和其他事件。它确实会为其他角色开火。箭头键和选项卡的事件不起作用。
很抱歉我才发现这个，根据你告诉我的，没有任何改变http://stackoverflow.com/questions/14959048/how-to-detect-key-down-event-for-arrow-key-on-textarea

标签： javascript jquery ios ipad keyboard-events

【解决方案1】：

我知道这似乎是一个严峻的答案，如果是，我深表歉意。

几周前我一直在努力解决这个问题，最终放弃了。
无数小时试图让 iPad 上的箭头键触发 onkeydown 事件似乎完全有效，就好像它们甚至没有被按下一样。

游戏（或类似游戏）的一个很好的替代方法是使用 WSAD 键，这就是我所做的。

WSAD 键的代码是：

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

这是您通常检测WSAD 键何时被按下的方式：

$(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.
});

方向键的代码是：

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

这是您通常检测箭头键何时被按下的方式：

$(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();
});

注意：您只能使用onkeydown 事件来检查箭头键是否被按下。

您也可以使用var key = event.keyCode ? event.keyCode : event.which;
引用Peter Darmis:

10.50 之前的 Opera 版本会因为四个特殊键（Insert、Delete、Home 和 End）返回非零 event.which 值而造成混乱，这意味着在旧版浏览器中使用 event.keyCode 可能更“安全”。Source

引用 jQuery api：

event.which 属性规范化event.keyCode 和event.charCode。键盘按键输入建议观看event.which。有关更多详细信息，请阅读 MDN 上的 event.charCode。
Source

祝你好运，万事如意。

【讨论】：

能否请您写下您对charCode 的答复，.which() 已规范化...再次引用 Peter Darmis 的引述，如果您愿意，我不介意。 .. MDN中charCode的[注释][developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…，特别是keydown和charCode的部分？？？如果我记得它写charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.
如你所知@Mango，我不是来和任何人争论的，我只是发布了我的答案。我也在从这个网站学习......还有很多:) 现在因为它规范化了keyCode 和charCode 这意味着很可能（我从来没有见过 which() 的内部代码）它在适当的情况下使用两者大大地。所以基本上你可以说在我的回答中var key = event.keyCode ? event.keyCode : event.which; 部分是冗余的。不，这是正确的编码。由于keyCode 设置在keydown 上，因此您可以首先尝试查看是否从中获得价值，如果失败，则可以转为使用which()
这是最新的 jQuery 的一部分...// Includes some event props shared by KeyEvent and MouseEvent props: ( "altKey bubbles cancelable ctrlKey currentTarget detail eventPhase " + "metaKey relatedTarget shiftKey target timeStamp view which" ).split( " " ), fixHooks: {}, keyHooks: { props: "char charCode key keyCode".split( " " ), filter: function( event, original ) { // Add which for key events if ( event.which == null ) { event.which = original.charCode != null ? original.charCode : original.keyCode; } return event; } },
@PeterDarmis 感谢您的更新，我正在调查。另外，如果您想给我更多意见，您可以使用chat.stackoverflow.com/rooms/113088/…，我已启用desktop notifications，我可以更快地回复您的消息。

【解决方案2】：

对于大多数浏览器，您可以使用类似

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

但是，如果您想更彻底地查看以下 sn-p。在此之前，请查看 KeyboardEvent 已使用且将被弃用或已弃用的属性。

PS：请检查使用 jQuery(red) 和 javascript(blue) 时 event.code 的区别。

$(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>

【讨论】：

请记住event.keyCode在所有浏览器中不支持，event.which被jQuery规范化，这意味着它可以跨所有浏览器。
这小段代码var keyCode = e.keyCode ? e.keyCode : e.which;不满足event.keyCode不支持所有浏览器的事实吗？？？ @Mango 如果e.keyCode 未定义，你能告诉我var keyCode 的值是多少吗？
授予keyCode 变量不会未定义，但这不是我的意思，我的意思是，当你知道一个事实时，检查event.keyCode 是否支持有什么意义event.which 总是会被支持？
是的，你说得对，几乎所有的latest 浏览器都支持event.which。那么我们为什么要检查event.keyCode？但是这两个在第一种方式中并不完全相同......并且也检查一下 - unixpapa.com/js/key.html - 关于event.which：“10.50 之前的 Opera 版本通过返回非零事件来搞砸了。四个特殊键的值（插入、删除、主页和结束）。“在旧浏览器中更安全。这就是为什么我也使用event.keyCode。但是，感谢您的反对票，这已经得到了很好的解释。 @芒果
event.which 属性规范化event.keyCode 和event.charCode。键盘按键输入建议观看event.which。 event.which 还标准化按钮按下（mousedown 和 mouseupevents），报告左侧按钮为 1，中间按钮为 2，右侧按钮为 3。来源：api.jquery.com/event.which。为什么要使用可能遵循标准的东西而不是确实遵循标准的东西？

【解决方案3】：

这可能是其他人提供的额外内容或其他内容。在本例中，如果按下键 W，则会被检查。

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

您可以检查keyCode 或which 是否可用，具体取决于您的浏览器类型和版本。

了解更多Keyboard Events Info。

对于Event Keycodes。

【讨论】：

【解决方案4】：

此问题可能是由 iPad 中按箭头键的默认行为引起的。通常箭头键滚动文档。但是当文本字段被聚焦时，默认值被阻止。它可能在浏览器的实现中也停止冒泡。

除了监听文档事件，您还可以监听输入字段的事件。见Fiddle。我没有蓝牙键盘，所以无法测试。如果它不起作用，请见谅。

$(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>

【讨论】：

对此进行了测试。我收到字母数字键等的按键消息，但没有箭头键。当文本输入字段具有焦点时，向上箭头将文本插入符号定位到文本的开头，向下箭头将插入符号定位到文本末尾。
好的，不管是谁投了反对票，你能解释一下吗。其他答案甚至没有解决问题，而是说与问题完全无关的话。我比他们更大的缺陷可能是什么？
输入事件不会用 ipad 上的方向键触发。