В чем разница между работой с keyup и keydown в javascript? - PullRequest
Новая
       55

В чем разница между работой с keyup и keydown в javascript?

2 голосов
/ 05 июля 2019

Я только что изучил события нажатия клавиш в javascript и удивляюсь, почему я получаю разные результаты в keyup и keydown.напримересли я назначаю вход с идентификатором и пропускаю через него addEventListner [reffer code], тогда, если я набираю «1234» в событии keydown, я получаю вывод как «123», и эта проблема не возникает с событием keyup.

короче говоря, я просто хотел спросить, почему в случае keydown ни один символ (введенный во входных данных) не равен no.символа отображается в выводе.это не происходит с keyup, и какой я должен использовать? 

<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <input type="text" name="" id="in" placeholder="enter a value" style="border: solid; margin: 15px; padding: 5px">
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
      Keydown result: <div id="keydown"></div>
</div>
<div style="border: 5px solid black; margin:10px; width:30vw; height: 15vh">
       Keyup result:<div id="keyup"></div>
</div>
</body>
</html>

<script>
document.getElementById('in').addEventListener('keydown', runevent);

function runevent(e){

   document.getElementById('keydown').innerText = e.target.value;

}

document.getElementById('in').addEventListener('keyup', runevent1);

function runevent1(e){

   document.getElementById('keyup').innerText = e.target.value;

}


</script>

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

Короче говоря, я просто хотел спросить, почему в случае нажатия клавиши ни один символ (набранный при вводе) не равен no.символа отображается в выводе.это не происходит с keyup и какой из них мне следует использовать?

Если вас интересуют символов , используйте keypress, если вы хотите обработать символ, сгенерированный событиямиили используйте input, если вы просто хотите получить последнее значение поля.

  • keydown запускается до того, как символ добавляется в поле, поэтому вы не видите4 после ввода 1234.(Если вы запретите действие по умолчанию keydown, символ никогда не будет добавлен.)

  • keypress также запускается перед добавлением символа.

  • input запускается после добавления символа.

  • keyup запускается после добавления символа.

Это может помочь вам увидеть последовательность: 

const input = document.getElementById("field");
const output = document.getElementById("output");

function handleEvent(e) {
    output.insertAdjacentHTML("beforeend",
       "" + e.type + ": " + input.value + "
");} input.addEventListener (" keydown ", handleEvent); input.addEventListener (" keyup ", handleEvent); input.addEventListener (" keypress ", handleEvent); input.addEventListener (" input ", handleEvent); 
#output pre {
    margin-top: 0;
    margin-bottom: 0;
}
<input type="text" id="field">
<div id="output"></div>
0 голосов
/ 05 июля 2019

Событие KeyUp запускается, когда пользователь отпускает ключ.

Событие KeyDown запускается, когда пользователь нажимает a Key.

Событие keydown происходит при нажатии клавиши, за которым сразу же следует событие нажатие клавиши .Затем при отпускании клавиши генерируется событие keyup .

Чтобы понять разницу между нажатием клавиши и нажатием клавиши, полезно понять разницу между «символом»и «ключ» .«Клавиша» - это физическая кнопка на клавиатуре компьютера, а «символ» - это символ, набираемый нажатием кнопки. Теоретически, события нажатия клавиш и нажатия клавиш представляют собой нажатие или отпускание клавиш , в то время как событие нажатия клавиш представляет вводимый символ.Реализация теории не одинакова во всех браузерах

...