我正在尝试使用我的键盘，所以当我按 1 时，它会改变我的文本的颜色。我添加了键盘功能，所以当我按 1 时它被识别，它将它连接到我正在努力处理的文本。我有一种感觉，我需要添加一个 keyListener，但我试过了，但似乎没有用。有什么建议么？谢谢大家
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "49") {
alert("The '1' key is pressed.");
}
}
window.addEventListener("keydown", moveSomething, false);
function moveSomething(e) {
switch(e.keyCode) {
case 37:
alert("The 'left arrow key' is pressed")
// left key pressed
break;
case 38:
// up key pressed
alert("The 'up arrow key' is pressed")
break;
case 39:
alert("The 'right arrow key' is pressed")
// right key pressed
break;
case 40:
alert("The 'down arrow key' is pressed")
// down key pressed
break;
}
}
document.onkeydown = keydown;
function keydown (evt) {
if (!evt) evt = event;
if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {
alert("CTRL+ALT+F4");
} else if (evt.shiftKey && evt.keyCode === 9) {
alert("Shift+TAB");
}
}.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
<h1>
</h1>
</head>
<body>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<div class="grid-container">
<div class="item keyShift">1</div>
<div class="item keyArrowDown">2</div>
<div class="item keyArrowUp">3</div>
<div class="item keyArrowLeft">4</div>
<div class="item keyArrowRight">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>最佳答案
我相信您正在寻找这样的东西:
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.keyCode == "49") {
alert("The '1' key is pressed.");
document.getElementsByClassName('one')[0].style.color="red"; //replace with whatever color you would like
}
if (e.keyCode == "50") {
alert("The '2' key is pressed.");
document.getElementsByClassName('two')[0].style.color="red"; //replace with whatever color you would like
}
// do the same for the rest of the numbers
}
window.addEventListener("keydown", moveSomething, false);
function moveSomething(e) {
switch(e.keyCode) {
case 37:
alert("The 'left arrow key' is pressed")
// left key pressed
break;
case 38:
// up key pressed
alert("The 'up arrow key' is pressed")
break;
case 39:
alert("The 'right arrow key' is pressed")
// right key pressed
break;
case 40:
alert("The 'down arrow key' is pressed")
// down key pressed
break;
}
}
document.onkeydown = keydown;
function keydown (evt) {
if (!evt) evt = event;
if (evt.ctrlKey && evt.altKey && evt.keyCode === 115) {
alert("CTRL+ALT+F4");
} else if (evt.shiftKey && evt.keyCode === 9) {
alert("Shift+TAB");
}
}.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
<h1>
</h1>
</head>
<body>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<div class="grid-container">
<div class="item one keyShift">1</div>
<div class="item two keyArrowDown">2</div>
<div class="item three keyArrowUp">3</div>
<div class="item four keyArrowLeft">4</div>
<div class="item five keyArrowRight">5</div>
<div class="item six">6</div>
<div class="item seven">7</div>
<div class="item eight">8</div>
<div class="item nine">9</div>
</div>
</body>您需要 [0]，因为该方法返回具有该类名的所有元素(即使只有一个，仍然会有一组 HTML 元素。)
关于javascript - 我如何连接我的功能检查 Key Pressed 以更改我在 javascript 中的文本的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55026084/