keydown,keypress,keyup三者之间的区别

最近看了Javascript高级教程中对过滤输入的介绍，想实现比如电话号码中不能包好非数值的字符，而相应文本中插入字符的操作是keypress事件，所以就想通过阻止这个事件的默认事件行为来阻止这个事件的默认行为来屏蔽此类字符，但是屏蔽之后所有的安检操作都会被屏蔽，文本框会变成可读的。如果只想屏蔽特定的字符，需要检测keypress事件对应的字符编码，然后决定如何响应。

但是我在利用keypree事件的时候，完全搞蒙了。因为前面看了keydown、keypress、keyup事件，它们到底怎么用呢？

下面是Js高级教程对三者的描述：
keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
keypress：当用户按下键盘上的字符键时触发，如果按住不让的话，会重复触发此事件；
keyup：当用户释放键盘上的字符键时触发。

那么对应的keyCode（键码）和charCode（字符编码）是什么样子的呢？

  1. 在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定的键对应。对数字字母键，keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同，
  2. 发生keypress事件意味着按下的键会影响到屏幕中文本的显示。在所有的浏览器中，按下能够插入或者删除字符的键都会触发keypress事件。IE9，FireFox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时，才包含值，而且这个值是按下的那个键所代表的字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的键码。

<input type="text" id="text1"/>
<script>
  var oTxt=document.getElementById("text1");
  oTxt.onkeyup=function getCharCode()
  {
    return false;
    if (typeof(event.CharCode)==="number")
    {

      alert(String.fromCharCode(event.charCode)) ;
    }
    else
    {
      alert(String.fromCharCode(event.keyCode));
    }
  };
</script>

比如上述的代码，按下a就会显示97,按下b会显示98.
而alert(String.fromCharCode(event.keyCode));会将其转换成实际的字符,比如按下a则会显示a，按下B则会x显示b。String.fromCharCode（）：接收一个指定的unicode的值，返回一个字符串，该方法是String的静态方法，不能自己电定义。
而三者之间的区别如下：（这里借鉴了一下猫在前端路上的博客，结合上面的理解，可能会好一点，后面我也会贴出他的博文）：https://www.cnblogs.com/littlelan/archive/2013/03/28/2987851.html

按下键盘会触发键盘事件，顺序依次为：keydown->keypress->keyup.

  1. keydown、keypress、事件触发在文字还没敲进文本框，就像上面的keypress事件，只是按下字符键，显示的结果，即得到的是触发键盘事件前的文本。而keyup是事件触发整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。
  2. keypress与keydown与keyup的主要区别：
    （1）对中文输入法不友好，无法响应中文输入；
    （2） 无法响应系统功能键（比如delete，backspace）；
    （3） 由于前面两个限制，keyCode与keydown和keyup不是很一致；
  3. 在keyup中无法是无法阻止浏览器的默认事件的，因为在keypress时，浏览器默认行为已经完成，即将输入文本框（尽管这时还没有显示），这个时候不管是preventDefault还是return false，都不能阻止在文本框中输入文字的行为，如要阻止在文本框中输入文字，必须在keydown或者keypress时，即时阻止。

出处：https://blog.csdn.net/qq_26102281/article/details/83785085

===============================================================

按下键盘时会触发键盘事件，顺序为keydown -> keypress ->keyup。

1、keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById(‘input‘);
input.onkeydown = function() {
    console.log(‘onkeydown ‘ + this.value);
}
input.onkeypress = function() {
    console.log(‘onkeypress ‘ + this.value);
}
input.onkeyup = function() {
    console.log(‘onkeyup ‘ + this.value);
}
</script>

在文本框中敲入数字1，输出结果为：

onkeydown default
onkeypress default
onkeyup default1

2、keypress事件与keydown和keyup的主要区别

1）对中文输入法支持不好，无法响应中文输入

2）无法响应系统功能键（如delete，backspace）

3）由于前面两个限制，keyCode与keydown和keyup不是很一直

3、在keyup事件中无法阻止浏览器默认事件，因为在keypress时，浏览器默认行为已经完成，即将文字输入文本框（尽管这时还没显示），这个时候不管是preventDefault还是return false，都不能阻止在文本框中输入文字的行为，如要阻止在文本框中输入文字，必须在keydown或keypress时阻止

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById(‘input‘);
input.onkeydown = function() {
    //return false;
    console.log(‘onkeydown ‘ + this.value);
}
input.onkeypress = function() {
    //return false;
    console.log(‘onkeypress ‘ + this.value);
}
input.onkeyup = function() {
    return false;
    console.log(‘onkeyup ‘ + this.value);
}
</script>

结果为keydown、keypress事件中return false文本框无法输入文字，在keyup事件中return false文本框可以输入文字

4、textInput事件

文本框的键盘响应事件把textInpput也加进来，触发的顺序为：keydown -> keypress ->textInput -> keyup

textInput事件是DOM3后支持的，主要用来替换keypress，与keypress的主要差别在于添加了对中文输入法的支持，还有一点就是textInput只在可编辑文本区才能触发（如input、textarea），而keypress是任何能获得焦点的控件的能触发（如button），但是textInput事件的支持还不是很好，目前只有safari、chrome支持。

出处：https://www.cnblogs.com/littlelan/archive/2013/03/28/2987851.html

=================================================================

C# 如何捕获键盘按钮和组合键以及KeyPress/KeyDown事件之间的区别 （附KeyChar/KeyCode值）

1. 首先将窗口属性KeyPreview设为true，如果属性对话框中找不到，就直接在代码里添加； 
2. 添加KeyPress / KeyDown事件：

1、KeyPress 和KeyDown 、KeyPress之间的区别
    1）KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符 
        KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键） 
    2）KeyPress 只能捕获单个字符 
        KeyDown 和 KeyUp 可以捕获组合键。 
    3）KeyPress 可以捕获单个字符的大小写 
    4）KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。 
    5）KeyPress 不区分小键盘和主键盘的数字字符。 
        KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。 
    6）其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

2、KeyPress事件

Winform文本框只能输入数字和退格键和小数点：

private void TextBox_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar != 8 && !Char.IsDigit(e.KeyChar) && e.KeyChar != ‘.‘)
    {
        e.Handled = true;
    }
}
//或者
private void TextBox_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar != ‘\b‘ && !Char.IsDigit(e.KeyChar) && e.KeyChar != ‘.‘)
    {
        e.Handled = true;
    }
}

3、KeyChar取值：

另外2个特殊ASCII码：回车=13，换行=10，退格=‘\b‘ 或者 退格=8

4、KeyDown事件：

捕获单个按键：

private void Form1_KeyDown(object sender, KeyEventArgs e)
{
       Keys key = e.KeyCode;
       if (e.Control!=true)//如果没按Ctrl键
return;
       switch (key)
       {
            case Keys.NumPad0:
                //按下小键盘0以后
                break;
            case Keys.NumPad1:
                //按下小键盘1以后
                break;
            case Keys.S:
                //按下S键以后
                break;
            case Keys.Up:
                //按下向下键以后
                break;
       }
}

捕获组合键（以全选为例）：

private void textBox1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.Control && e.KeyCode == Keys.A)
    {
        (sender as TextBox).SelectAll();
    }
}

5、KeyCode取值： 

keycode    8 = BackSpace BackSpace
keycode    9 = Tab Tab
keycode   12 = Clear
keycode   13 = Enter
keycode   16 = Shift_L
keycode   17 = Control_L
keycode   18 = Alt_L
keycode   19 = Pause
keycode   20 = Caps_Lock
keycode   27 = Escape Escape
keycode   32 = space space
keycode   33 = Prior
keycode   34 = Next
keycode   35 = End
keycode   36 = Home
keycode   37 = Left
keycode   38 = Up
keycode   39 = Right
keycode   40 = Down
keycode   41 = Select
keycode   42 = Print
keycode   43 = Execute
keycode   45 = Insert
keycode   46 = Delete
keycode   47 = Help
keycode   48 = 0 equal braceright
keycode   49 = 1 exclam onesuperior
keycode   50 = 2 quotedbl twosuperior
keycode   51 = 3 section threesuperior
keycode   52 = 4 dollar
keycode   53 = 5 percent
keycode   54 = 6 ampersand
keycode   55 = 7 slash braceleft
keycode   56 = 8 parenleft bracketleft
keycode   57 = 9 parenright bracketright
keycode   65 = a A
keycode   66 = b B
keycode   67 = c C
keycode   68 = d D
keycode   69 = e E EuroSign
keycode   70 = f F
keycode   71 = g G
keycode   72 = h H
keycode   73 = i I
keycode   74 = j J
keycode   75 = k K
keycode   76 = l L
keycode   77 = m M mu
keycode   78 = n N
keycode   79 = o O
keycode   80 = p P
keycode   81 = q Q at
keycode   82 = r R
keycode   83 = s S
keycode   84 = t T
keycode   85 = u U
keycode   86 = v V
keycode   87 = w W
keycode   88 = x X
keycode   89 = y Y
keycode   90 = z Z
keycode   96 = KP_0 KP_0
keycode   97 = KP_1 KP_1
keycode   98 = KP_2 KP_2
keycode   99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 192 = numbersign apostrophe
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

6、如何获取键盘按钮的keyChar值（keyCode同理）

private void Form1_KeyPress(object sender, KeyPressEventArgs e)
{
    char Key_Char = e.KeyChar;//判断按键的 Keychar
    MessageBox.Show(((int)(Key_Char)).ToString());//转成整数显示
}

出处：https://www.cnblogs.com/feiyuhuo/p/5060773.html

==================================================================

虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.

keydown：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发（opera浏览器除外）。
keypress：用户按下一个按键，并产生一个字符时发生（也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。
keyup：用户释放某一个按键是触发。

定义和用法

完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。

当按钮被按下时，发生 keydown 事件。

keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

[html]

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("input").keydown(function(){
  7. $("input").css("background-color","#FFFFCC");
  8. });
  9. $("input").keyup(function(){
  10. $("input").css("background-color","#D6D6FF");
  11. });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. Enter your name: <input type="text" />
  17. <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
  18. </body>
  19. </html>

中所周知，jquery封装了很多事件交互方法，这里讲到的问题在原生js中也是有的。

keyup是在用户将按键抬起的时候才会触发的，属于整个按键过程中的最后阶段，所以有其特定的用处，就是在左侧输入，右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。

[html] view
plaincopy

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>无标题页</title>
  4. <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
  5. <script type="text/javascript">
  6. $(function() {
  7. $(‘#t1‘).live(‘keyup‘, function() {
  8. $(‘#v1‘).text($(this).val());
  9. });
  10. $(‘#t2‘).live(‘keydown‘, function() {
  11. $(‘#v2‘).text($(this).val());
  12. });
  13. $(‘#t3‘).live(‘keypress‘, function() {
  14. $(‘#v3‘).text($(this).val());
  15. });
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <textarea id="t1"></textarea>
  21. <div id="v1">
  22. </div>
  23. <textarea id="t2"></textarea>
  24. <div id="v2">
  25. </div>
  26. <textarea id="t3"></textarea>
  27. <div id="v3">
  28. </div>
  29. </body>
  30. </html>

这里分别应用了三种事件，其中t1能够完整的同步到v1中，而keypress和keydown总是少最后一个字符，这样就说明了这三种事件触发的小小区别，keydown是在按下时触发，不能得到最后的输入结果，keypress也是一样。

例如：keydown绑定文本框，每次点击触发事件，在获取文本框的值，总是打印上次操作时文本框的内容，

这是因为keydown操作后，事件触发了，但值还未显示在文本框中，所以这类操作要用keyup 一个完整的按键动作后，才可以获取文本框的值。

keydown与keypress更适用于通过键盘控制页面类功能的实现。

获取键盘点击的键位：

[html] view
plaincopy

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("input").keydown(function(event){
  7. $("div").html("Key: " + event.which);
  8. });
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. 请随意键入一些字符：<input type="text" />
  14. <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
  15. <div />
  16. </body>
  17. </html>

出处：https://blog.csdn.net/z69183787/article/details/25700837

原文地址：https://www.cnblogs.com/mq0036/p/10416717.html

时间： 2025-01-05 09:38:56

keydown,keypress,keyup三者之间的区别的相关文章

keyDown keyPress keyUp 事件的区别

keyDown keyPress keyUp  事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后再放开时,结果为: keydownkeypresskeydownkeypresskeydownkeypresskeydownkeypress ...keyup n个keydown和n个keypress,1个keyup,系统设置的时间间隔. 二 具体区别 KeyPress主要用来接收字母.数字等ANSI字符,而

外发外协外包三者之间的区别与联系

1.应当贯彻顾客为中心原则,通过建立体系来控制过程,确保产品质量.不要化精力在符合标准要求上.如果您 的目标.产品的要求不切合顾客要求的话,就是符合了ISO 9001标准要求,不能满足顾客要求的,符合顾客要求了,顾客满意了,不注意质量成本,经济效益,也就不一定能赚到钱的. 2.7.4条采购要求是,如果您从质量管理体系外得到各种影响产品要求符合性的资源(过程也作为一种资源)的话,就必须对这些产品或者活动(也就是过程) 加以控制的."采购"英文是purchasing,"外包过程&

[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现.(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascrip

sql表连接left join,right join,inner join三者之间的区别

sql表连接left join,right join,inner join区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 (以左表数据为基准,不足补为NULL)right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录(以右表数据为基准,不足补为NULL)inner join(等值连接) 只返回两个表中联结字段相等的行(条件on之相等的数据) 举例如下: ---------------------------------------

你知道URL、URI和URN三者之间的区别吗

这是一个经典的技术争论,许多人都会自问:URL.URI,很可能还有URN,它们之间的区别是什么.虽然,现在我们简单地把 URN 和 URL 都看做 URI,但严格来说URI可以进一步划分为URL.URN或者这两者的组合,所以了解这三者之间的区别将会非常有趣并让人受益匪浅.如果你恰好在某个地方碰到了这些东西,那么至少应该知道它们的含义. 我认为,尽管对一般人来说,不了解这三个缩略词之间的技术差异以及它们各自的含义并不是什么问题.但是,如果你作为一个计算机科学家.一个Web开发者.一个系统管理员,或

iOS中NSNotification、delegate、KVO三者之间的区别与联系？

iOS中NSNotification.delegate.KVO三者之间的区别与联系? delegate.notification和KVO他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢? 在开发ios应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers间怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信: 1.委托delegation: 2.通知中心Notification Center: 3.键值观察key value observing,K

维基百科上—数据仓库、数据挖掘、OLAP三者之间的区别

数据仓库可以作为数据挖掘和OLAP等分析工具的资料来源,由于存放于数据仓库中的资料,必需经过筛选与转换,因此可以避免分析工具使用错误的资料,而得到不正确的分析结果. 数据挖掘和OLAP同为分析工具,其差别在于OLAP提供用户一便利的多维度观点和方法,以有效率的对数据进行复杂的查询动作,其预设查询条件由用户预先设定,而数据挖掘,则能由资讯系统主动发掘资料来源中,未曾被查觉的隐藏资讯,和透过用户的认知以产生知识. 数据挖掘(Data Mining)技术是经由自动或半自动的方法探勘及分析大量的资料,以

键盘事件之keydown keypress keyup区别

经过测试,显然事件执行的顺序是: keydown->keypress->keyup. 但是连续按一个按键的话,会一直触发:keydown keypress.直到你提起按键,会触发keyup. 但是对一些特殊的键子,各个事件在浏览器里能触发的事件并不一样. 有几点需要注意: 1.像keypress对: shift ctrl 上下键等非字符的输入不会触发. 2.在enter键遇到form表单的时候,当只有一个文本框里并且输入ENTER的时候,form表单会自动提交,这时候只会触发keydown,k

.NET、C#和ASP.NET三者之间的区别 [转载]

经常有同学会在.NET.C#和ASP.NET这三者之间区别不清楚,到底它们之间有什么联系呢?在这里我给大家归纳如下: 1..NET是一个平台,一个抽象的平台的概念. .NET平台其本身实现的方式其实还是库,抽象层面上来看是一个平台. 本人理解的.NET核心就是.NET Framwork. .NET Framework包括两个关键组成元素: a.Common Language Runtime,公共语言运行时(CLR)-提供内在管理,代码安全性检测等功能 b..NET Framework Class