Uczę się JS i próbuję zrobić „terminal” w przeglądarce. Jedyne, czego teraz potrzebuję, to wyświetlić klawisz, który został naciśnięty. Na przykład użytkownik naciska „k”, „k” wyświetla się na ekranie, użytkownik naciska „d”, na ekranie wyświetla się „kd”. Tak to powinno działać. Ale w moim przypadku, kiedy naciskam klawisz "r", to reaguje jak Ctrl + R i strona ładuje się ponownie, wiele innych klawiszy reaguje jak Ctrl + Klawisz. Ale kiedy naciskam „w”, wyświetla się jako „w” zamiast zamykania karty. Potrzebuję kluczy do prawidłowego wyświetlania. Przykład

"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>
0
eignrvalue 15 marzec 2020, 14:53

2 odpowiedzi

Najlepsza odpowiedź

Tworzę teraz podobny projekt i używam ukrytego elementu wejściowego, takiego jak

<input id="hidden_input" style="opacity:0;width:0;height:0;">

Zanim dodamy wszystko inne, musimy sprawić, by element był zawsze skupiony:

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

Następnie należy mieć odbiornik „input” w tym elemencie, który będzie wywoływał, gdy element wejściowy zostanie zaktualizowany (z tekstem, a nie przy użyciu klawiszy CTRL itp.)

hidden_input_element.addEventListener("input", updateMirror);

Funkcja updateMirror zaktualizuje widoczny element, taki jak w Twoim przypadku element o identyfikatorze „tekst”.

function updateMirror(){
document.getElementById("text").innerText = hidden_input_element.value;
}

Później musimy poradzić sobie z niektórymi zdarzeniami

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();
});

Następnie utwórz tę funkcję obsługi (handleInput):

function handleInput(input){
//Create a list of commands that the user can use.
}

Mam nadzieję, że to zadziała, oto fragment:

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>
1
frogDoraTheRollerskatingFedora 15 marzec 2020, 18:26

Blink (Chrome) nie rozumie event.key tak jak inne wyszukiwarki (przeglądarki). Nie używaj również zdarzenia keypress, nie jest tak niezawodne (nie mogę sobie przypomnieć, dlaczego), ale upewnij się, że przetestowałeś swój kod przed użyciem go w środowisku na żywo.

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);
}
0
John 15 marzec 2020, 12:15