这三个事件有什么区别?谷歌上搜索我发现
KeyDown 事件在触发时触发 用户按下一个键。
当 KeyUp 事件被触发时 用户发布密钥。
KeyPress 事件在触发时触发 用户按下&发布密钥。 (onKeyDown后跟onKeyUp)
我理解前两个,但 KeyPress 与 KeyUp 相同? (或者可以在不按( KeyDown )的情况下释放密钥( KeyUp )吗?)
这有点令人困惑,有人可以为我清楚吗?
答案 0 :(得分:161)
点击此处查看此答案中最初使用的已归档link。
从该链接:
理论上,keydown和keyup 事件代表被按下的键或 发布时,同时发布了按键事件 表示正在键入的字符。 该理论的实施是 在所有浏览器中都不一样。
答案 1 :(得分:145)
KeyPress
,KeyUp
和KeyDown
分别类似于:Click
,MouseUp,
和MouseDown
。
Down
首先发生Press
发生在第二位(输入文字时)Up
最后发生(文字输入完成时)。keydown
keypress
textInput
keyup
编辑 Vsync几个月前添加了一个演示片段,但刚才我删除它因为它不再有效,发出以下错误:“未捕获DOMException:无法读取'localStorage '来自'Window'的属性:该文档是沙盒的,缺少'allow-same-origin'标志。“您可以在测试页面中试用它,但是:
window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);
function log(event){
console.log( event.type );
}
答案 2 :(得分:14)
onkeydown
(例如,在快捷方式中;例如,在Ctrl+A
中,Ctrl
保持“关闭”。
onkeyup
(包括修饰符/ etc键)
onkeypress
是onkeydown
和onkeyup
的组合,或者取决于键盘重复(当onkeyup
未被触发时)。 (这种重复行为是我尚未测试过的。如果你做测试,请添加注释!)
textInput
(仅限webkit)(例如,Shift+A
将输入大写'A',但Ctrl+A
会选择文本而不输入任何文本输入在那种情况下,所有其他事件都被解雇了)
答案 3 :(得分:14)
这里的大多数答案都更多地关注理论而不是实际问题,keyup
和keypress
之间存在一些重大差异,因为它与输入字段值有关,至少在Firefox中是这样(在43)测试。
如果用户将1
键入空输入元素:
输入元素的值将是keypress
处理程序
1
处理程序中输入元素的值为keyup
(新值)。
如果您正在做一些依赖于在输入之后知道新值而不是当前值(如内联验证或自动标签)的内容,这一点至关重要。
情景:
12345
。12345
。A
。在输入字母keypress
后触发A
事件时,文本框现在只包含字母A
。
可是:
12345
。5
所以似乎浏览器(Firefox 43)删除了用户的选择,然后触发keypress
事件,然后更新字段内容,然后触发keyup
。
答案 4 :(得分:10)
似乎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,而不是按下按键时触发事件。
不同之处在于事件不是一次触发而是多次触发(只要按住按键)。请注意并相应地处理它们。
答案 5 :(得分:8)
onkeypress事件适用于除所有浏览器中的ALT,CTRL,SHIFT,ESC之外的所有键,其中onkeydown事件适用于所有键。意味着onkeydown事件捕获所有键。
答案 6 :(得分:7)
首先,他们有不同的含义:他们开火:
其次,某些键会触发其中一些事件而不会触发其他事件。例如,
此外,您应该记住,event.keyCode
(和event.which
)通常具有相同的KeyDown和KeyUp值,但KeyPress的值不同。试试我创建的playground。顺便说一下,我注意到了很多怪癖:在Chrome中,当我按下 ctrl + a 并且input
/ textarea
为空时,对于event.keyCode
(和event.which
)等于1
的KeyPress火力! (当输入不为空时,它根本不会触发。)
最后,还有一些语用:
textarea
时,KeyPress和KeyDown都会多次开火(Chrome 71),如果我需要多次触发的事件和单键的KeyUp,我会使用KeyDown释放。input
和textarea
的行为有所不同(主要是由于失去焦点) )我在我的项目中使用了所有3个但不幸的是可能忘记了一些语用学。 (需要注意的是:还有input
和change
个事件)
答案 7 :(得分:5)
Jan Wolter article是我遇到过的最好的作品,如果链接已经死了,你可以找到存档的副本here。
它很好地解释了所有浏览器关键事件,
按下键时会发生 keydown 事件,紧接着是按下按键事件。然后在释放密钥时生成 keyup 事件。
要了解 keydown 和 keypress 之间的区别,区分字符和键非常有用。 键是计算机键盘上的物理按键。 字符是通过按下按钮键入的符号。在美国键盘上,在按住 Shift 键的同时按 4 键通常会产生一个&#34;美元符号&#34;字符。世界上每个键盘都不一定如此。理论上, keydown 和 keyup 事件表示按下或释放的键,而 keypress 事件表示正在键入的字符。在实践中,这并不总是它的实施方式。
有一段时间,一些浏览器在 keypress 之后立即触发了另一个名为 textInput 的事件。早期版本的DOM 3标准旨在替代 keypress 事件,但整个概念后来被撤销。 Webkit在版本525和533之间支持这一点,并且我告诉IE支持它,但是我从未检测到它,可能是因为Webkit要求它被称为 textInput ,而IE称之为 textinput 强>
还有一个名为 input 的事件,受所有浏览器支持,只有在对 textarea 或输入字段进行更改后才会触发。通常按键会触发,然后键入的字符将出现在文本区域中,然后输入将触发。 输入事件实际上并未提供有关键入的键的任何信息 - 您必须检查文本框以找出更改的内容 - 因此我们并非如此认为这是一个关键事件,并没有在这里真正记录它。虽然它最初只是针对textareas和输入框定义的,但我相信还有一些动机可以将其推广到其他类型的对象上。
答案 8 :(得分:3)
基本上,这些事件对不同的浏览器类型和版本的行为不同,我创建了一个小的jsBin测试,你可以检查控制台,找出这些事件对你的目标环境的行为,希望这个帮助。 http://jsbin.com/zipivadu/10/edit
答案 9 :(得分:3)
只是想分享好奇心:
当使用onkeydown事件来激活JS方法时,该事件的charcode与onkeypress的charcode不同!
例如,当使用onkeypress时,小键盘键将返回与字母键上方的数字键相同的字符代码,但不是在使用onkeydown时!
我花了几秒钟的时间弄明白为什么我在使用onkeydown时检查某些字符的脚本失败了!
演示:https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK
是的,是的。我知道方法的定义是不同的..但是非常令人困惑的是,在两种方法中,使用event.keyCode检索事件的结果但是它们不返回相同的值..不是很声明性实施。答案 10 :(得分:1)
KeyDown -当您实际按下键时
KeyUp -当您实际释放密钥时
KeyPress -输入字符时... 按住键会触发多次 KeyPress ,其他键将触发只能发射一次。
答案 11 :(得分:0)
一些实际事实可能对决定处理哪个事件有用(运行下面的脚本并专注于输入框):
$('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 并释放它:
按键17 17控件
keyup 17 17控件
键可能会导致死和重复的“键” (例如,〜, keydown
上的´)。按´并释放它以显示双´´
:
keydown 192192死了
keydown 192192´
按键180180´
按键180180´
keyup 192192已死
此外,非键入输入(例如,范围为<input type="range">
)仍会根据所按下的键触发所有的keyup,keydown和keypress事件。
答案 12 :(得分:0)
BLAZOR....
如果您想检查按下了哪个键,请使用 onkeypress
或 onkeydown
但如果您想从文本字段中获取文本,然后检查最后按下的键,例如您正在扫描条形码并且您想在按下 ENTER 键时触发一个事件(几乎所有条码扫描器都在最后发送 13 个“ENTER”),那么您应该使用 onkeyup
否则您将无法在文本字段中输入文本。< /p>
例如
<input type="text" class="form-control" @bind="@barcode" @onkeyup="BarCodeScan" placeholder="Scan" />
这将在您输入代码按回车键后立即调用 BarCodeScan 函数,或者如果您从扫描仪扫描它,将自动调用 BarCodeScan 函数。如果您在此处使用 onkeypress
或 onkeydown
,则不会进行绑定,您也不会从文本字段中获取文本。