这三个事件有什么区别?通过谷歌搜索,我发现:
onKeyDown
事件在用户按下键时触发。onKeyUp
事件在用户释放键时触发。onKeyPress
事件在用户按下并释放键(即先触发onKeyDown
,再触发onKeyUp
)时触发。
我理解前两个事件,但是 onKeyPress
不就和 onKeyUp
一样吗?有可能只释放键(onKeyUp
)而不按下键(onKeyDown
)吗?
这有点令人困惑,请有经验的人帮忙解答一下?
这三个事件有什么区别?通过谷歌搜索,我发现:
onKeyDown
事件在用户按下键时触发。onKeyUp
事件在用户释放键时触发。onKeyPress
事件在用户按下并释放键(即先触发onKeyDown
,再触发onKeyUp
)时触发。
我理解前两个事件,但是 onKeyPress
不就和 onKeyUp
一样吗?有可能只释放键(onKeyUp
)而不按下键(onKeyDown
)吗?
这有点令人困惑,请有经验的人帮忙解答一下?
基本上,这些事件在不同的浏览器类型和版本上有不同的作用。我创建了一个小的jsBin测试,您可以检查控制台以了解这些事件在您的目标环境中的行为。希望这能帮到您。 http://jsbin.com/zipivadu/10/edit
我观察到keyup和keydown之间的区别是:
如果我们为keydown事件附加一个事件处理程序并记录输入框的值,即(e.target.value),它返回的是keydown事件之前的值。
但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值,它返回的是包括被按下的键在内的最新值。
让我们通过示例来理解
<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// the latest keypressed is not shown in e.target.value
// when keydown event handler is executed
// since until the keyup is not triggered
// the input box will not have that character in its value
const searchCitiesEleKeyDown = document.querySelector("#searchCities");
searchCitiesEleKeyDown.addEventListener("keydown", (e) => {
console.log(e.target.value);
});
// but in case of keyup event the e.target.value prints
// the text box content with the latest character pressed
// since as soon as the keyup event triggers
// the input box will have that character pressed in its value
const searchCitiesEleKeyUp = document.querySelector("#searchCities");
searchCitiesEleKeyUp.addEventListener("keyup", (e) => {
console.log(e.target.value);
});
<input type="text" id="searchCities" />
CodeSandbox链接 https://codesandbox.io/s/keydown-vs-keyup-wpj33m
$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>
按下:
非插入/键入键(例如Shift,Ctrl)不会触发keypress
。按下Ctrl并释放它:
keydown 17 17 控制
keyup 17 17 控制
应用字符转换的键盘上的键可能会导致死键和重复“键”(例如~,´)在keydown
时。按下´并释放它以显示双倍´´
:
keydown 192 192 死键
keydown 192 192 ´´
keypress 180 180 ´
keypress 180 180 ´
keyup 192 192 死键
此外,非键入输入(例如范围<input type="range">
)仍将根据按下的键触发所有keyup、keydown和keypress事件。
BLAZOR....
如果您想要检查按下了哪个键,请使用onkeypress或onkeydown,但如果您想要获取文本字段中的文本,然后检查最后按下的键,例如您正在扫描条形码并且希望在按下“ENTER”键时触发事件(几乎所有条形码扫描仪都会发送13个"ENTER"),那么您应该使用onkeyup,否则您将无法获取文本字段中键入的文本。
例如
<input type="text" class="form-control" @bind="@barcode" @onkeyup="BarCodeScan" placeholder="扫描"/>
这将在您输入代码并按下enter之后立即调用BarCodeScan函数,或者如果您从扫描器扫描它,则自动调用BarCodeScan函数。如果您在此处使用"onkeypress"或"onkeydown",则绑定将不会发生,并且您将无法从文本字段中获取文本。