如何使用帶有藍牙鍵盤的iPad在JavaScript上檢測箭頭鍵

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; var key = event.keyCode ? event.keyCode : event.which;
引用Peter Darmis ：

10.50之前的Opera版本通過返回非零event.which 。四個特殊鍵（插入，刪除，主頁和結束）的值，意味着使用event.keyCode可能在舊瀏覽器中更“安全”。
資源

引用jQuery api：

該event.which財產歸event.keyCode和event.charCode 。 建議觀看event.which鍵盤輸入鍵。 欲了解更多詳情，請閱讀event.charCode的MDN 。
資源

祝你好運，一切順利。

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

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

但是，如果您想更全面，請查看以下代碼段。 在此之前，請查看使用過的KeyboardEvent屬性，這些屬性將被棄用或不推薦使用。

PS：使用jQuery（紅色）和javascript（藍色）時檢查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>

Answer 3

這可能是其他人給出的額外的東西。 在此示例中，如果按下則正在檢查鍵W

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

您可以檢查keyCode或which是可用的，具體取決於您的瀏覽器類型和版本。

有關更多鍵盤事件信息。

對於事件密鑰代碼。

Answer 4

問題可能是由於在iPad中按箭頭鍵的默認行為。 通常，箭頭鍵滾動文檔。 但是，當文本字段被聚焦時，將阻止默認值。 它可能在瀏覽器的實現中也停止了冒泡。

您也可以收聽輸入字段的事件，而不是收聽文檔事件。 見小提琴。 我沒有藍牙鍵盤所以我無法測試它。 對不起，如果它不起作用。

 $(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在JavaScript上檢測箭頭鍵

問題描述

4 個解決方案

解決方案1
12

解決方案2
4 2016-05-24 22:11:31

解決方案3
1 2016-05-30 08:17:12

解決方案4
0 2016-05-28 12:31:20

如何使用帶有藍牙鍵盤的iPad在JavaScript上檢測箭頭鍵

問題描述

4 個解決方案

解決方案1 12

解決方案2 4 2016-05-24 22:11:31

解決方案3 1 2016-05-30 08:17:12

解決方案4 0 2016-05-28 12:31:20

解決方案1
12

解決方案2
4 2016-05-24 22:11:31

解決方案3
1 2016-05-30 08:17:12

解決方案4
0 2016-05-28 12:31:20