我正在学习 JS 并尝试在浏览器中制作一个“终端”。我现在唯一需要的就是显示按下的键。例如，用户按下“k”，屏幕上显示“k”，用户按下“d”，屏幕上显示“kd”。事情应该是这样的。但就我而言，当我按下“r”键时，它的反应类似于 control + r 并且页面重新加载，许多其他键的反应类似于 control + 键。但是当我按“w”时，它显示为“w”而不是关闭选项卡。我需要按键才能正确显示。例子"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><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>
2 回答
阿波罗的战车
TA贡献1862条经验 获得超6个赞
我现在正在构建一个类似的项目，并且使用隐藏的输入元素，例如
<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>
<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>
慕姐8265434
TA贡献1813条经验 获得超2个赞
event.keyBlink（Chrome）不像其他引擎（浏览器）那样理解。也不要使用该keypress事件，它不太可靠（无法立即回忆起原因），但请确保在实际环境中使用代码之前对其进行测试。
function event_key()
{
var r = false;
if (Object.defineProperty)
{
Object.defineProperty(KeyboardEvent.prototype,'key',
{
get:function ()
{
var r;
var k = {'65':'a','66':'b','67':'c','68':'d','69':'e','70':'f','71':'g','72':'h','73':'i','74':'j','75':'k','76':'l','77':'m','78':'n','79':'o','80':'p','81':'q','82':'r','83':'s','84':'t','85':'u','86':'v','87':'w','88':'x','89':'y','90':'z','8':'Backspace','9':'Tab','13':'Enter','16':'Shift','17':'Control','18':'Alt','20':'CapsLock','27':'Esc','32':' ','33':'PageUp','34':'PageDown','35':'End','36':'Home','37':'Left','38':'Up','39':'Right','40':'Down','45':'Insert','46':'Del','48':'0','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6','55':'7','56':'8','57':'9','91':'OS','92':'OS','93':'Menu','96':'0','97':'1','98':'2','99':'3','100':'4','101':'5','102':'6','103':'7','104':'8','105':'9','106':'*','107':'+','109':'-','110':'.','111':'/','112':'F1','113':'F2','114':'F3','115':'F4','116':'F5','117':'F6','118':'F7','119':'F8','120':'F9','121':'F10','122':'F11','123':'F12','144':'NumLock','145':'ScrollLock','186':':','187':'=','188':',','189':'-','190':'.','191':'/','192':'`','219':'[','220':'\\','221':']','222':'\''}
if (k[this.keyCode]) {r = k[this.keyCode];}
else {r = 'Unknown Key';}
return r;
}
});
}
return r;
}
window.onkeydown = function(event)
{
var k = (event.key) ? event.key : event_key();
console.log('Key pressed: '+k);
}
- 2 回答
- 0 关注
- 62 浏览
添加回答
举报
0/150
提交
取消