Question

我一直在学习javascript中的按键事件，想知道为什么我在keyup和keydown中得到不同的结果。例如如果我为输入分配ID并通过它传递addEventListner [reffer code]，则如果我在keydown事件中键入“ 1234”，则输出为“ 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>

Answer 1

简而言之，我只是想问一个问题：为什么在按下键盘时，字符（在输入中键入）的数量不等于否。输出中显示的字符数。使用keyup不会发生这种情况，我应该使用哪一个？

如果您对 characters 感兴趣，请使用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",
       "<pre>" + e.type + ": " + input.value + "</pre>"
    );
}

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>

Answer 2

KeyUp 事件是在用户释放密钥时触发的。

KeyDown 事件是在用户按下键时触发的。

按键按下事件在按下键时发生，紧随其后   通过 keypress 事件。然后，当按键时会生成 keyup 事件   被释放。

为了了解按键和按键的区别，请   有助于理解“字符”和“字符”之间的区别   “键” 。 “键”是计算机键盘上的物理按钮，而   “字符”是通过按下按钮键入的符号。 理论上，   keydown和keyup事件表示按键被按下或释放，   而keypress事件表示正在键入的字符。的   该理论在所有浏览器中的实现都不相同

在JavaScript中使用keyup和keydown有什么区别？

2 个答案: