2015-10-13 81 views
0

如果用户键入了一个字母,那么我的代码如下:这封信不能重复。如何忽略重复使用键码?

在我的情况下,我使用了一个键码和一个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>

回答

1

你可以保持它已经 “看到” 字符的列表。当新角色到达时,检查它是否已经在列表中。如果没有,请忽略它。

您还可以使用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>

+0

THX队友IDK的有一个简单的方法来做到这一点。我花了我的时间输入所有这些如果其他语句 – Kingsgame

0

这可能是一个解决方案!

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

0

绝对最简单的方式将您的eventListenerdocument.onkeydown更改为document.onkeyup。您遇到的问题是,当用户按下该键时,会为每个DOM摘要循环触发您的事件侦听器。 document.onkeyup监听器是将您从这个简单错误中分离出来的最简单的方法。如果你想进一步防止任何重复的人物,我建议你使用@ PaulRoub的非常简单的答案。

虽然@ PaulRoub的回答将单独解决您的问题,但我建议的简单更改将大大提高您的表现,我相信这是绝对必要的。

我也建议改变你的事件监听器document.addEventListener('keyup', typing, true),因为它现在是安装事件侦听器的标准方法,并且不会在此改变你的documentsonkeyup属性。

我已经复制@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>

+0

thx为提示队友 – Kingsgame