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

Posted 2021-02-10 mq0036

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了keydown,keypress,keyup三者之间的区别相关的知识，希望对你有一定的参考价值。

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

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

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

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

在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定的键对应。对数字字母键，keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同，
发生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.

keydown、keypress、事件触发在文字还没敲进文本框，就像上面的keypress事件，只是按下字符键，显示的结果，即得到的是触发键盘事件前的文本。而keyup是事件触发整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。
keypress与keydown与keyup的主要区别：
（1）对中文输入法不友好，无法响应中文输入；
（2）无法响应系统功能键（比如delete，backspace）；
（3）由于前面两个限制，keyCode与keydown和keyup不是很一致；
在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 != ‘‘ && !Char.IsDigit(e.KeyChar) && e.KeyChar != ‘.‘)
    {
        e.Handled = true;
    }
}

3、KeyChar取值：

技术图片

另外2个特殊ASCII码：回车=13，换行=10，退格=‘‘ 或者退格=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

View Code

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] 

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("input").keydown(function(){  

    $("input").css("background-color","#FFFFCC");  

  });  

  $("input").keyup(function(){  

    $("input").css("background-color","#D6D6FF");  

  });  

});  

</script>  

</head>  

<body>  

Enter your name: <input type="text" />  

<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  

</body>  

</html>

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

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

[html]view
 plaincopy 

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

    <title>无标题页</title>  

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>  

    <script type="text/javascript">  

        $(function() {  

            $(‘#t1‘).live(‘keyup‘, function() {  

                $(‘#v1‘).text($(this).val());  

            });  

            $(‘#t2‘).live(‘keydown‘, function() {  

                $(‘#v2‘).text($(this).val());  

            });  

            $(‘#t3‘).live(‘keypress‘, function() {  

                $(‘#v3‘).text($(this).val());  

            });  

        });      

    </script>  

</head>  

<body>  

    <textarea id="t1"></textarea>  

    <div id="v1">  

    </div>  

    <textarea id="t2"></textarea>  

    <div id="v2">  

    </div>  

    <textarea id="t3"></textarea>  

    <div id="v3">  

    </div>  

</body>  

</html>

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

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

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

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

获取键盘点击的键位：

[html]view
 plaincopy 

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("input").keydown(function(event){   

    $("div").html("Key: " + event.which);  

  });  

});  

</script>  

</head>  

<body>  

请随意键入一些字符：<input type="text" />  

<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>  

<div />  

</body>  

</html>

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

以上是关于keydown,keypress,keyup三者之间的区别的主要内容，如果未能解决你的问题，请参考以下文章

keydown/keypress/keyup

KeyDown,KeyPress 和KeyUp

jquery 键盘事件 keypress() keydown() keyup()

keyup、keydown、keypress 和 input 事件有啥区别？

KeyPress和KeyDown/KeyUp

键盘事件

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

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

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

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

定义和用法

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