JavaScript“keydown”工作不正確

Question

我正在學習 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 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

Blink (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 個解決方案

解決方案1
1 已采納 2020-03-15 12:35:30

解決方案2
0 2020-03-15 12:15:23

JavaScript“keydown”工作不正確

問題描述

2 個解決方案

解決方案1 1 已采納 2020-03-15 12:35:30

解決方案2 0 2020-03-15 12:15:23

解決方案1
1 已采納 2020-03-15 12:35:30

解決方案2
0 2020-03-15 12:15:23