如何忽略重複使用鍵碼？

如果用戶鍵入了一個字母，那麼我的代碼如下：這封信不能重複。如何忽略重複使用鍵碼？

在我的情況下，我使用了一個鍵碼和一個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>

來源

2015-10-13 Kingsgame

你可以保持它已經「看到」字符的列表。當新角色到達時，檢查它是否已經在列表中。如果沒有，請忽略它。

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

來源

2015-10-13 16:36:41

THX隊友IDK的有一個簡單的方法來做到這一點。我花了我的時間輸入所有這些如果其他語句 – Kingsgame

這可能是一個解決方案！

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

來源

2015-10-13 16:39:47 Anonymous0day

絕對最簡單的方式將您的eventListener從document.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>

來源

2015-10-13 16:46:21 WebWanderer

thx爲提示隊友 – Kingsgame

如何忽略重複使用鍵碼？

回答

相關問題