如何忽略重复使用的键码?

How can I ignore repeated use of a keycode?

本文关键字：键码 何忽略      更新时间：2023-09-26

如果用户键入了一个字母，我希望在我的代码中发生这样的情况:这个字母不能重复。

在我的情况下，我使用一个键码和一个if - else语句。是否有一种方法可以使它只按一次键，每个字母一次 ?

<!DOCTYPE html>
<html>
<head>
  <style>
    #Ans_container {
      margin-left: 37%;
      margin-bottom: 350px;
      width: 400px;
      height: 80px;
      background-color: yellow;
      font-size: 50px;
    }
  </style>
</head>
<body onload="del();">
  <div id="Ans_container"></div>
  <script>
    function typing(x) {
      if (x.keyCode == 65) {
        document.getElementById("Ans_container").innerHTML += "A";
      }
      if (x.keyCode == 66) {
        document.getElementById("Ans_container").innerHTML += "B";
      }
      if (x.keyCode == 67) {
        document.getElementById("Ans_container").innerHTML += "C";
      }
      if (x.keyCode == 68) {
        document.getElementById("Ans_container").innerHTML += "D";
      }
      if (x.keyCode == 69) {
        document.getElementById("Ans_container").innerHTML += "E";
      }
      if (x.keyCode == 70) {
        document.getElementById("Ans_container").innerHTML += "F";
      }
      if (x.keyCode == 71) {
        document.getElementById("Ans_container").innerHTML += "G";
      }
      if (x.keyCode == 72) {
        document.getElementById("Ans_container").innerHTML += "H";
      }
      if (x.keyCode == 73) {
        document.getElementById("Ans_container").innerHTML += "I";
      }
      if (x.keyCode == 74) {
        document.getElementById("Ans_container").innerHTML += "J";
      }
      if (x.keyCode == 75) {
        document.getElementById("Ans_container").innerHTML += "K";
      }
      if (x.keyCode == 76) {
        document.getElementById("Ans_container").innerHTML += "L";
      }
      if (x.keyCode == 77) {
        document.getElementById("Ans_container").innerHTML += "M";
      }
      if (x.keyCode == 78) {
        document.getElementById("Ans_container").innerHTML += "N";
      }
      if (x.keyCode == 79) {
        document.getElementById("Ans_container").innerHTML += "O";
      }
      if (x.keyCode == 80) {
        document.getElementById("Ans_container").innerHTML += "P";
      }
      if (x.keyCode == 81) {
        document.getElementById("Ans_container").innerHTML += "Q";
      }
      if (x.keyCode == 82) {
        document.getElementById("Ans_container").innerHTML += "R";
      }
      if (x.keyCode == 83) {
        document.getElementById("Ans_container").innerHTML += "S";
      }
      if (x.keyCode == 84) {
        document.getElementById("Ans_container").innerHTML += "T";
      }
      if (x.keyCode == 85) {
        document.getElementById("Ans_container").innerHTML += "U";
      }
      if (x.keyCode == 86) {
        document.getElementById("Ans_container").innerHTML += "V";
      }
      if (x.keyCode == 87) {
        document.getElementById("Ans_container").innerHTML += "W";
      }
      if (x.keyCode == 88) {
        document.getElementById("Ans_container").innerHTML += "X";
      }
      if (x.keyCode == 89) {
        document.getElementById("Ans_container").innerHTML += "Y";
      }
      if (x.keyCode == 90) {
        document.getElementById("Ans_container").innerHTML += "Z";
      }
    }
    document.onkeydown = typing;
  </script>
</body>
</html>

你可以保留一个已经"看到"的字符列表。当一个新角色出现时，检查它是否已经在列表中。如果没有，忽略它。

您还可以通过使用String.fromCharCode()而不是26个if语句来节省大量的输入。

var seen = {};
function typing(x) {
  if ((x.keyCode >= 65) && (x.keyCode <= 90)) {
    var st = String.fromCharCode(x.keyCode);
    if (!seen[st]) {
      document.getElementById('Ans_container').innerHTML += st;
      seen[st] = true;
    }
  }
}
document.onkeydown = typing;
#Ans_container {
  margin-left: 37%;
  margin-bottom: 350px;
  width: 400px;
  height: 80px;
  background-color: yellow;
  font-size: 50px;
}
<div id="Ans_container"></div>

这是一个解决方案!

<!DOCTYPE html>
<html>
<head>
  <style>
    #Ans_container {
      margin-left: 37%;
      margin-bottom: 350px;
      width: 400px;
      height: 80px;
      background-color: yellow;
      font-size: 50px;
    }
  </style>
</head>
<body onload="del();">
  <div id="Ans_container"></div>
  <script>
    var Done = ' '; // the empty list of pressed keys
    function typing(x) {
      
      var curVal = String.fromCharCode(x.keyCode);
          // we look the position of curVal in Done
          // if it is not in ( === -1 ) we continue
          //      |                    
          //      |                       if keyCode is between 64 and 91
          //      |                              we continue
          //      |                                    |
          //      v                                    v
      if (Done.indexOf(curVal)===-1 && (x.keyCode > 64 && x.keyCode < 91) ) {
          document.getElementById("Ans_container").innerHTML += curVal;
          Done += curVal + ' '; // we add curVal in the list of pressed keys.
      }
    }
    document.onkeydown = typing;
  </script>
</body>
</html>

最简单的方法是将eventListener从document.onkeydown更改为document.onkeyup。您遇到的问题是，当用户按住该键时，每个DOM摘要周期都会触发事件侦听器。document.onkeyup侦听器是使您远离这个简单错误的最简单方法。如果你想进一步防止任何字符的重复，我建议你使用@PaulRoub的非常简单的答案。

虽然@PaulRoub的答案将单枪匹马地解决你的问题，但我建议的简单改变将大大提高你的表现，我相信这是绝对必须的。

我还建议将您的事件侦听器更改为document.addEventListener('keyup', typing, true)，因为它现在是附加事件侦听器的标准方法，并且不覆盖您的documents onkeyup属性。

我已经复制了@PaulRoub的代码片段，并对其进行了修改。

var seen = {};
function typing(x) {
  if ((x.keyCode >= 65) && (x.keyCode <= 90)) {
    var st = String.fromCharCode(x.keyCode);
    if (!seen[st]) {
      document.getElementById('Ans_container').innerHTML += st;
      seen[st] = true;
    }
  }
}
document.addEventListener('keyup', typing, true);
#Ans_container {
  margin-left: 37%;
  margin-bottom: 350px;
  width: 400px;
  height: 80px;
  background-color: yellow;
  font-size: 50px;
}
<div id="Ans_container"></div>

相关文章：