Question

当使用蓝牙键盘时，我无法找到在iPad和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>

是否可以检测到箭头？

Answer 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版本通过返回四个特殊键（插入，删除，主页和结尾）的非零event.which值而变得混乱，这意味着使用event.keyCode可能会更“安全”旧浏览器。
Source

引用jQuery api：

event.which属性规范化event.keyCode和event.charCode。建议观看event.which键盘输入键。有关详情，请参阅MDN上的event.charCode Source

祝你好运，一切顺利。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

但如果您想更全面一下，请查看以下代码段。在此之前，请查看已使用且将被弃用或已弃用的KeyboardEvent属性。

PS：使用jQuery（红色）和javascript（蓝色）时检查event.code的区别。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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。

Answer 4

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: