在javascript中，keyup和keydown的工作有什么区别？
在javascript中，keyup和keydown的工作有什么区别？
提问于 2019-07-05 16:00:31
我一直在学习javascript中的keypress事件，我想知道为什么在keyup和keydown中得到不同的结果。就像。如果我用id分配一个输入，并通过它传递一个addEventListnerreffer代码，那么如果我在keydown事件中输入"1234“，就会得到输出为"123”，而keyup事件不会出现这个问题。
简而言之，我只想问，为什么在keydown的情况下，字符的no (输入输入)不等于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>Stack Overflow用户
回答已采纳
发布于 2019-07-05 16:03:41
简单地说，我只想问，为什么在按下键时，字符的no (输入输入)不等于no。显示在输出中的字符。这不发生在键盘和我应该使用哪一个？
如果您对字符感兴趣，如果希望处理事件生成的字符，请使用keypress；如果只想使用最新的字段值，则使用input。
keydown是在字符被添加到字段之前触发的，这就是为什么在输入1234之后没有看到4的原因。(如果阻止keydown的默认操作，则不会添加字符。)beforeinput是在输入发生更改之前触发的(例如，如果更改的原因是按键，则在字符被删除之前)。- 在添加字符之前还会触发
keypress。 注：keypress被否决，请参见beforeinput和keydown。 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56906229
复制相关文章
相似问题
腾讯云开发者
