onKeyPress Vs. onKeyUp和onKeyDown

时间：2010-08-03 13:10:42

标签： javascript dom javascript-events

这三个事件有什么区别？谷歌上搜索我发现

  

KeyDown 事件在触发时触发   用户按下一个键。

     

当 KeyUp 事件被触发时   用户发布密钥。

     

KeyPress 事件在触发时触发   用户按下＆amp;发布密钥。   （onKeyDown后跟onKeyUp）

我理解前两个，但 KeyPress 与 KeyUp 相同？ （或者可以在不按（ KeyDown ）的情况下释放密钥（ KeyUp ）吗？）

这有点令人困惑，有人可以为我清楚吗？

13 个答案:

答案 0 :(得分：161)

点击此处查看此答案中最初使用的已归档link。

从该链接：

  

理论上，keydown和keyup   事件代表被按下的键或   发布时，同时发布了按键事件   表示正在键入的字符。   该理论的实施是   在所有浏览器中都不一样。

答案 1 :(得分：145)

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

  1. Down首先发生
  2. Press发生在第二位（输入文字时）
  3. Up最后发生（文字输入完成时）。

    4. 例外是 webkit ，其中有一个额外的事件：

    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键入空输入元素：

  1. 输入元素的值将是keypress处理程序

    2. 中的空字符串（旧值）

  2. 1处理程序中输入元素的值为keyup（新值）。

    3. 如果您正在做一些依赖于在输入之后知道新值而不是当前值（如内联验证或自动标签）的内容，这一点至关重要。

    情景：

    1. 用户在输入元素中键入12345。
    2. 用户选择文字12345。
    3. 用户键入字母A。

      4. 在输入字母keypress后触发A事件时，文本框现在只包含字母A。

      可是：

      1. Field.val（）是12345。
      2. $ Field.val（）。length是5
      3. 用户选择是一个空字符串（阻止您通过覆盖选择来确定删除的内容）。

        4. 所以似乎浏览器（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)

首先，他们有不同的含义：他们开火：

  • KeyDown - 按键按下
    • 时
  • KeyUp - 按下按钮发布， 之后更新输入/ textarea的值（其中唯一一个）
  • KeyPress - 介于这些之间并且实际上并不意味着一个密钥被推送和释放（见下文）。

其次，某些键会触发其中一些事件而不会触发其他事件。例如，

  • KeyPress忽略 delete ，箭头， home / end ， ctrl ， alt ， shift 等，而KeyDown和KeyUp没有;
  • 当您在Windows中通过 alt + tab 切换窗口时，只有 alt 的KeyDown触发，因为窗口切换发生在任何其他事件之前（和系统会阻止 tab 的KeyDown，我想，至少在Chrome 71中。

此外，您应该记住，event.keyCode（和event.which）通常具有相同的KeyDown和KeyUp值，但KeyPress的值不同。试试我创建的playground。顺便说一下，我注意到了很多怪癖：在Chrome中，当我按下 ctrl + a 并且input / textarea为空时，对于event.keyCode（和event.which）等于1的KeyPress火力！ （当输入不为空时，它根本不会触发。）

最后，还有一些语用：

  • 为了处理箭头，您可能需要使用onKeyDown：如果用户持有↓，KeyDown会多次触发（而KeyUp只有在释放按钮时才触发一次）。此外，在某些情况下，您可以轻松地阻止KeyDown的传播，但不能（或不能轻易地）阻止KeyUp的传播（例如，如果您想在输入时提交而不向文本字段添加换行符）。
  • 令人惊讶的是，当你拿着一把钥匙，比如说textarea时，KeyPress和KeyDown都会多次开火（Chrome 71），如果我需要多次触发的事件和单键的KeyUp，我会使用KeyDown释放。
  • 当你必须为他们的行动提供更好的响应时，KeyDown通常更适合游戏。
  • esc 通常通过KeyDown处理：KeyPress不会触发，而且KeyUp在不同浏览器中对input和textarea的行为有所不同（主要是由于失去焦点） ）
  • 如果您想将文本区域的高度调整为内容，您可能不会使用onKeyDown而是onKeyPress（ PS ok，实际上最好在本案例中使用onChange ）

我在我的项目中使用了所有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，则不会进行绑定，您也不会从文本字段中获取文本。

相关问题
最新问题