如何忽略重复使用键码?
如果用户键入了一个字母,那么我的代码如下:这封信不能重复。如何忽略重复使用键码?
在我的情况下,我使用了一个键码和一个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>
thx为提示队友 – Kingsgame
THX队友IDK的有一个简单的方法来做到这一点。我花了我的时间输入所有这些如果其他语句 – Kingsgame