JavaScript некорректно работает "keydown" - PullRequest
Новая
       0

JavaScript некорректно работает "keydown"

0 голосов
/ 15 марта 2020

Я изучаю 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>

Ответы [ 2 ]

1 голос
/ 15 марта 2020

Я строю похожий проект прямо сейчас, и я использую скрытый элемент ввода, например 

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

И затем для этого элемента имеется прослушиватель «input», который будет вызываться при обновлении элемента input (с текстом, а не при использовании клавиш CTRL и т. Д. c.) 

hidden_input_element.addEventListener("input", updateMirror);

Функция updateMirror обновит видимый элемент, как в вашем случае элемент с идентификатором «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>
0 голосов
/ 15 марта 2020

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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...