我正在學習 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 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消