Почему не удается отобразить код клавиши в console.log? - PullRequest
0 голосов
/ 01 октября 2018

Я хочу показать все коды клавиш при вводе некоторых символов в тег ввода.Обь вход, свяжите функцию checkWord с событием onkeydown, почему console.log не может показать его значение кода ключа?

ob = window.document.getElementById("check");
function checkWord(){
    console.log(onkeydown.keyCode);
}
ob.addEventListener("onkeydown",checkWord);  
 
<input id="check" type="text">
 

Я хочу, чтобы console.log показывал 65, когда вводить a во входном теге.

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

У вас есть две проблемы

  • Событие называется keydown.
  • keyCode является свойством event, которое передается вашему обработчику

ob = window.document.getElementById("check");
function checkWord(e){
    console.log(e.keyCode);
}
ob.addEventListener("keydown",checkWord);  
<input id="check" />
0 голосов
/ 01 октября 2018

Хм, вы можете сделать это так:

// Getting Element
const textInput = document.getElementById("textInput");
// Adding event listener
textInput.addEventListener("keyup", event => {
  console.log(event.keyCode);
});
<input type="text" id="textInput">

В вашем коде это будет выглядеть так:

const ob = document.getElementById("check");
ob.addEventListener("keydown",checkWord);  
function checkWord(event){
  console.log(event.keyCode);
}
<input type="text" id="check">

Это в основном не работало, потому что вы использовали неправильное имя события (onkeydown -> keydown) и не передавали событие вваша функция.

Кстати: onkeydown существует, но используется так:

object.onkeydown = function;

Разница между onkeydown и addEventLisener заключается в том, что onkeydown определяется один раз ис помощью слушателей событий вы можете добавить как можно больше к тому же событию, что и вы.

// Adds listener
object.onkeydown = function0;
// Overwrites the old listener
object.onkeydown = function1;

// Add listener
object.addEventLisener("keydown", function0);
// Add another listener to the stack
object.addEventLisener("keydown", function1);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...