这三件事有什么不同?在谷歌上我发现:

当用户按下一个键时,onKeyDown事件被触发。 当用户释放密钥时触发onKeyUp事件。 当用户按下并释放一个键时触发onKeyPress事件 (onKeyDown紧接着onKeyUp)。

我理解前两个,但不是onKeyPress相同的onKeyUp?是否有可能释放一个键(onKeyUp)而不按它(onKeyDown)?

这有点混乱,有人能帮我解释一下吗?


当前回答

当键按下时,Onkeydown被触发(就像在快捷键;例如,在Ctrl+A中,按下Ctrl键。

Onkeyup在按键释放时被触发(包括modifier/etc按键)

Onkeypress被触发为onkeydown和onkeyup的组合,或者取决于键盘重复(当onkeyup没有被触发时)。(我还没有测试过这种重复行为。如果要测试,请添加注释!)

textInput(仅webkit)在输入一些文本时被触发(例如,Shift+A将输入大写的“A”,但Ctrl+A将选择文本而不输入任何文本输入。在这种情况下,所有其他事件被触发)

其他回答

只是想分享一个好奇心:

当使用onkeydown事件来激活一个JS方法时,该事件的charcode与你使用onkeypress得到的不一样!

例如,当使用onkeypress时,numpad键将返回与字母键上方的数字键相同的字符代码,但当使用onkeydown时则不是!

我花了相当多的时间来弄清楚为什么我的脚本在使用onkeydown时检查某些字符码失败!

演示:https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

是的。我知道方法的定义是不同的。但非常令人困惑的是,在这两个方法中,事件的结果是使用event. keycode ..但是它们不会返回相同的值。不是一个非常声明性的实现。

砰....

如果你想检查哪个键被按下,使用onkeypress或onkeydown,但如果你想从文本字段中获取文本,然后检查最后按下的键,例如,你正在扫描条形码,你想在按下ENTER键时触发一个even(几乎所有的条形码扫描器都在最后发送13个“ENTER”),那么你应该使用onkeyup,否则你将无法在文本字段中输入文本。

例如

<输入类型=“文本” 类=“表单控件” @bind=“@barcode” @onkeyup=“条形码扫描” 占位符=“扫描” />

这将调用BarCodeScan函数后,你将立即按enter键入的代码,或者如果你从扫描仪扫描它,BarCodeScan函数将被自动调用。如果你在这里使用“onkeypress”或“onkeydown”,那么绑定将不会发生,你将不会从文本框中获得文本。

“KeyPress”现已弃用。请使用KeyDown键。

KeyPress, KeyUp和KeyDown分别类似于:Click, MouseUp和MouseDown。

先下 第二个按键发生(当输入文本时) Up发生在最后(当文本输入完成时)。

webkit是个例外,它有一个额外的事件:

keydown
keypress
textInput     
keyup

下面是一个片段,你可以自己看看什么时候事件被触发:

窗口。addEventListener(“弹起”,日志); 窗口。addEventListener(“键盘按键”,日志); 窗口。addEventListener(“keydown”、日志); 对数函数(事件){ console.log(事件。类型); }

似乎onkeypress和onkeydown做的是一样的(在上面已经提到的快捷键的小差异中)。

你可以试试这个:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

你会看到onkeypress和onkeydown事件都是在按下键时触发的,而不是在按下键时触发的。

不同之处在于,事件不是一次触发,而是多次触发(只要您按住键)。要意识到这一点,并相应地处理它们。

答:更新

KeyDown

当你按住键时,会触发多次。 触发元键。

键盘按键

当你按住键时,会触发多次。 不触发元键。

KeyUp

当你释放钥匙时,最后会触发一次。 触发元键。

这是addEventListener和jQuery中的行为。

https://jsbin.com/vebaholamu/1/edit?js,console,output <——试试例子

(答案已编辑正确的回答,截图和示例)