我正在学习 JS 并尝试在浏览器中制作一个“终端”。我现在唯一需要的就是显示按下的键。例如，用户按下“k”，屏幕上显示“k”，用户按下“d”，屏幕上显示“kd”。事情应该是这样的。但就我而言，当我按下“r”键时，它的 react 类似于 control + r 并且页面重新加载，许多其他键的 react 类似于 control + 键。但是当我按“w”时，它显示为“w”而不是关闭选项卡。我需要按键才能正确显示。 Example
"use strict";
document.addEventListener("keydown", function(a) {
text.innerHTML += a.key;
});body {
background-color: #222;
}
#text {
color: #0f0;
font-family: 'Courier New', Courier, monospace;
width: 1000px;
height: 1000px;
padding: 25px;
}<!DOCTYPE html">
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<p id="text"></p>
<script src="script.js"></script>
</body>
</html>最佳答案
我现在正在构建一个类似的元素，并且我使用隐藏的输入元素，例如
<input id="hidden_input" style="opacity:0;width:0;height:0;">
在添加其他内容之前，我们需要使元素始终聚焦:
var hidden_input_element = document.getElementById("hidden_input");
//Focus
hidden_input_element.focus();
//When unfocused, focus again
hidden_input_element.addEventListener("blur", hidden_input_element.focus);
然后在该元素上有一个“输入”监听器，该监听器将在输入元素更新时调用(使用文本，而不是使用 CTRL 键等时)
hidden_input_element.addEventListener("input", updateMirror);
updateMirror 函数将更新可见的元素，例如在您的例子中 ID 为“text”的元素。
function updateMirror(){
document.getElementById("text").innerText = hidden_input_element.value;
}
稍后，我们需要处理一些事件
hidden_input_element.addEventListener("keydown", function(e){
//When user presses enter, empty the input and send it to a handler.
if(e.keyCode == 13){
//Send input to handler
handleInput(hidden_input_element.value);
//Empty input
hidden_input_element.value = "";
}
//If the input would be changed, it might be helpful to update the mirror
updateMirror();
});
然后创建该处理函数(handleInput):
function handleInput(input){
//Create a list of commands that the user can use.
}
我希望这能起作用，这是一个片段:
var hidden_input_element = document.getElementById("hidden_input");
//Focus
hidden_input_element.focus();
//When unfocused, focus again
hidden_input_element.addEventListener("blur", hidden_input_element.focus);
hidden_input_element.addEventListener("input", updateMirror);
function updateMirror(){
document.getElementById("text").innerText = hidden_input_element.value;
}
hidden_input_element.addEventListener("keydown", function(e){
//When user presses enter, empty the input and send it to a handler.
if(e.keyCode == 13){
//Send input to handler
handleInput(hidden_input_element.value);
//Empty input
hidden_input_element.value = "";
}
//If the input would be changed, it might be helpful to update the mirror
updateMirror();
});
//This print function is to print a text in the log
function print(value){
//Create a text element
var new_line_element = document.createElement("p");
//Make the text look fancy
new_line_element.classList.add("line");
//Set the text on the element
new_line_element.innerText=value;
//Append the element in the log div
document.getElementById("log").appendChild(new_line_element);
}
function handleInput(input){
//This will happen when the user presses enter.
print(input);
}body {
background-color: #222;
}
.line {
color: #0f0;
font-family: 'Courier New', Courier, monospace;
width: 300px;
height: 10px;
/*
I set the width and height from 1000px to 1px, and removed padding 25px
*/
/*
Also, I recommend adding these:
*/
white-space: pre-wrap;
word-break: break-all;
}
/*
This is specified for the input, and not the log messages.
This is to add a cursor to see where you are.
*/
.input::after{
content:".";
color: transparent;
border-bottom: 2px solid #0f0;
position: relative;
top: -4px;
animation: cursorblink;
animation-duration: .5s;
animation-iteration-count: infinite;
}
@keyframes cursorblink{
50%{opacity:0;}
}
#hidden_input{
position: absolute;
left: 0px;
top: 0px;
}<!DOCTYPE html">
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div id="log"></div>
<p id="text" class="line input"></p>
<input id="hidden_input" style="opacity:0;width:0;height:0;">
<script src="script.js"></script>
</body>
</html>关于JavaScript "keydown"工作不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60692574/