Question

我正在学习JS，并试图在浏览器中建立一个“终端”。我现在唯一需要的是显示一个被按下的键。例如，用户按下屏幕上的“ k”，“ k”显示，用户按下屏幕上的“ d”，“ kd”。那是应该如何工作的。但是在我的情况下，当我按下键“ r”时，它的反应类似于control + r，并且页面重新加载，其他许多键也都作为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>

Answer 1

我现在正在构建一个类似的项目，并且使用了一个隐藏的输入元素，例如

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

Answer 2

闪烁（Chrome）不能像其他引擎（浏览器）那样理解event.key。另外，不要使用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);
}

JavaScript“ keydown”无法正常工作

2 个答案: