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

2023-08-15 11:51:16

最近看了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 !=  && !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     = BackSpace BackSpace

keycode     = Tab Tab

keycode    = Clear

keycode    = Enter

keycode    = Shift_L

keycode    = Control_L

keycode    = Alt_L

keycode    = Pause

keycode    = Caps_Lock

keycode    = Escape Escape

keycode    = space space

keycode    = Prior

keycode    = Next

keycode    = End

keycode    = Home

keycode    = Left

keycode    = Up

keycode    = Right

keycode    = Down

keycode    = Select

keycode    = Print

keycode    = Execute

keycode    = Insert

keycode    = Delete

keycode    = Help

keycode    =  equal braceright

keycode    =  exclam onesuperior

keycode    =  quotedbl twosuperior

keycode    =  section threesuperior

keycode    =  dollar

keycode    =  percent

keycode    =  ampersand

keycode    =  slash braceleft

keycode    =  parenleft bracketleft

keycode    =  parenright bracketright

keycode    = a A

keycode    = b B

keycode    = c C

keycode    = d D

keycode    = e E EuroSign

keycode    = f F

keycode    = g G

keycode    = h H

keycode    = i I

keycode    = j J

keycode    = k K

keycode    = l L

keycode    = m M mu

keycode    = n N

keycode    = o O

keycode    = p P

keycode    = q Q at

keycode    = r R

keycode    = s S

keycode    = t T

keycode    = u U

keycode    = v V

keycode    = w W

keycode    = x X

keycode    = y Y

keycode    = z Z

keycode    = KP_0 KP_0

keycode    = KP_1 KP_1

keycode    = KP_2 KP_2

keycode    = KP_3 KP_3

keycode  = KP_4 KP_4

keycode  = KP_5 KP_5

keycode  = KP_6 KP_6

keycode  = KP_7 KP_7

keycode  = KP_8 KP_8

keycode  = KP_9 KP_9

keycode  = KP_Multiply KP_Multiply

keycode  = KP_Add KP_Add

keycode  = KP_Separator KP_Separator

keycode  = KP_Subtract KP_Subtract

keycode  = KP_Decimal KP_Decimal

keycode  = KP_Divide KP_Divide

keycode  = F1

keycode  = F2

keycode  = F3

keycode  = F4

keycode  = F5

keycode  = F6

keycode  = F7

keycode  = F8

keycode  = F9

keycode  = F10

keycode  = F11

keycode  = F12

keycode  = F13

keycode  = F14

keycode  = F15

keycode  = F16

keycode  = F17

keycode  = F18

keycode  = F19

keycode  = F20

keycode  = F21

keycode  = F22

keycode  = F23

keycode  = F24

keycode  = Num_Lock

keycode  = Scroll_Lock

keycode  = acute grave

keycode  = comma semicolon

keycode  = minus underscore

keycode  = period colon

keycode  = numbersign apostrophe

keycode  = plusminus hyphen macron

keycode  =

keycode  = copyright registered

keycode  = guillemotleft guillemotright

keycode  = masculine ordfeminine

keycode  = ae AE

keycode  = cent yen

keycode  = questiondown exclamdown

keycode  = onequarter onehalf threequarters

keycode  = less greater bar

keycode  = plus asterisk asciitilde

keycode  = multiply division

keycode  = acircumflex Acircumflex

keycode  = ecircumflex Ecircumflex

keycode  = icircumflex Icircumflex

keycode  = ocircumflex Ocircumflex

keycode  = ucircumflex Ucircumflex

keycode  = ntilde Ntilde

keycode  = yacute Yacute

keycode  = oslash Ooblique

keycode  = aring Aring

keycode  = ccedilla Ccedilla

keycode  = thorn THORN

keycode  = eth ETH

keycode  = diaeresis cedilla currency

keycode  = agrave Agrave atilde Atilde

keycode  = egrave Egrave

keycode  = igrave Igrave

keycode  = ograve Ograve otilde Otilde

keycode  = ugrave Ugrave

keycode  = adiaeresis Adiaeresis

keycode  = ediaeresis Ediaeresis

keycode  = idiaeresis Idiaeresis

keycode  = odiaeresis Odiaeresis

keycode  = udiaeresis Udiaeresis

keycode  = ssharp question backslash

keycode  = asciicircum degree

keycode  =  sterling

keycode  = 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>
<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 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>
<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

码农公寓

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

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

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

定义和用法

相关文章

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