这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
这三件事有什么不同?在谷歌上我发现:
当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。
我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?
这有点混乱,有人能帮我解释一下吗?
当前回答
一些实际的事实可能有助于决定要处理哪个事件(运行下面的脚本并关注输入框):
“输入”(美元)。上(“钥匙键盘”,e=>控制台。打字,e.keyCode, e. yg, e.key) <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > 输入< - >
压:
非插入/键入键(例如Shift, Ctrl)将不会触发按键。按Ctrl并释放它: 按键17 17控制 按键17 17控制 将字符转换应用到其他字符的键盘上的键可能会导致死键和重复的“键”(例如~,´)。按´并释放它,以显示双重´´: 死亡192 按键192 192´´ 按键180°180° 按键180°180° 死了192
此外,非键入输入(例如,rang <input type="range">)仍然会根据按下的键触发所有的keyup, keydown和keypress事件。
其他回答
onkeypress事件适用于所有浏览器中除ALT, CTRL, SHIFT, ESC以外的所有键,其中onkeydown事件适用于所有键。意思是onkeydown事件捕获所有的键。
砰....
如果你想检查哪个键被按下,使用onkeypress或onkeydown,但如果你想从文本字段中获取文本,然后检查最后按下的键,例如,你正在扫描条形码,你想在按下ENTER键时触发一个even(几乎所有的条形码扫描器都在最后发送13个“ENTER”),那么你应该使用onkeyup,否则你将无法在文本字段中输入文本。
例如
<输入类型=“文本” 类=“表单控件” @bind=“@barcode” @onkeyup=“条形码扫描” 占位符=“扫描” />
这将调用BarCodeScan函数后,你将立即按enter键入的代码,或者如果你从扫描仪扫描它,BarCodeScan函数将被自动调用。如果你在这里使用“onkeypress”或“onkeydown”,那么绑定将不会发生,你将不会从文本框中获得文本。
我观察到的keyup和keydown之间的区别是
如果我们为keydown事件附加一个事件处理程序,并记录输入框的值,即 (e.target.value)它返回keydown事件之前的值
但是如果我们为keyup事件附加一个事件处理程序并记录输入框的值 它返回最新的值,包括被按下的键
让我们用例子来理解
// 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
点击这里查看这个答案中最初使用的存档链接。
从这个链接:
理论上,onKeyDown和onKeyUp事件表示正在按下或释放的键,而onKeyPress事件表示正在键入的字符。该理论在所有浏览器中的实现并不相同。
这篇由Jan Wolter撰写的文章是我所见过的最好的文章,如果链接失效,你可以在这里找到存档副本。
它很好地解释了所有浏览器键事件,
The keydown event occurs when the key is pressed, followed immediately by the keypress event. Then the keyup event is generated when the key is released. To understand the difference between keydown and keypress, it is useful to distinguish between characters and keys. A key is a physical button on the computer's keyboard. A character is a symbol typed by pressing a button. On a US keyboard, hitting the 4 key while holding down the Shift key typically produces a "dollar sign" character. This is not necessarily the case on every keyboard in the world. In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. In practice, this is not always the way it is implemented. For a while, some browers fired an additional event, called textInput, immediately after keypress. Early versions of the DOM 3 standard intended this as a replacement for the keypress event, but the whole notion was later revoked. Webkit supported this between versions 525 and 533, and I'm told IE supported it, but I never detected that, possibly because Webkit required it to be called textInput while IE called it textinput. There is also an event called input, supported by all browsers, which is fired just after a change is made to to a textarea or input field. Typically keypress will fire, then the typed character will appear in the text area, then input will fire. The input event doesn't actually give any information about what key was typed - you'd have to inspect the textbox to figure it out what changed - so we don't really consider it a key event and don't really document it here. Though it was originally defined only for textareas and input boxes, I believe there is some movement toward generalizing it to fire on other types of objects as well.