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 ElementById("text1");
{
return fal;
if (typeof(event.CharCode)==="number")
{
alert(String.fromCharCode(event.charCode)) ;
}
el
{
alert(String.fromCharCode(event.keyCode));
}
};
</script>
按下键盘会触发键盘事件,顺序依次为:keydown->keypress->keyup.
1. keydown、keypress、事件触发在⽂字还没敲进⽂本框,就像上⾯的keypress事件,只是按下字符键,显⽰的结果,即得到的是触发键盘事件前的⽂本。⽽keyup是事件触发整个键盘事件的操作已经完成,获得的是触发键盘事件
后的⽂本。
2. keypress与keydown与keyup的主要区别:
(1)对中⽂输⼊法不友好,⽆法响应中⽂输⼊;
(2)⽆法响应系统功能键(⽐如delete,);
(3)由于前⾯两个限制,keyCode与keydown和keyup不是很⼀致;
3. 在keyup中⽆法是⽆法阻⽌浏览器的默认事件的,因为在keypress时,浏览器默认⾏为已经完成,即将输⼊⽂本框(尽管这时还没有显⽰),这个时候不管是preventDefault还是return fal,都不能阻⽌在⽂本框中输⼊⽂字的⾏
为,如要阻⽌在⽂本框中输⼊⽂字,必须在keydown或者keypress时,即时阻⽌。
===============================================================
按下键盘时会触发键盘事件,顺序为keydown -> keypress ->keyup。
1、keydown、keypress事件触发在⽂字还没敲进⽂本框,这时如果在keydown、keypress事件中输出⽂本框中的⽂本,得到的是触发键盘事件前的⽂本,⽽keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的⽂本
<input id="input" value="default" type="text" />
<script>
var input = ElementById('input');also怎么读
console.log('onkeydown ' + this.value);
}
console.log('onkeypress ' + this.value);
}
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 fal,都不能阻⽌在⽂本框中输⼊⽂字的⾏为,如要阻⽌在⽂本框中输⼊⽂字,必须在keydown或keypress时阻⽌
<input id="input" value="default" type="text" />
<script>
var input = ElementById('input');
//return fal;
console.log('onkeydown ' + this.value);
}
//return fal;
console.log('onkeypress ' + this.value);
}
return fal;
console.log('onkeyup ' + this.value);
}
</script>
结果为keydown、keypress事件中return fal⽂本框⽆法输⼊⽂字,在keyup事件中return fal⽂本框可以输⼊⽂字
4、textInput事件
⽂本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup
textInput事件是DOM3后⽀持的,主要⽤来替换keypress,与keypress的主要差别在于添加了对中⽂输⼊法的⽀持,还有⼀点就是textInput只在可编辑⽂本区才能触发(如input、textarea),⽽keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的⽀持还不是很好,⽬前只有safari、chrome⽀持。
=================================================================
identify
C# 如何捕获键盘按钮和组合键以及KeyPress/KeyDown事件之间的区别(附KeyChar/KeyCode值)
1. ⾸先将窗⼝属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码⾥添加;
2. 添加KeyPress / KeyDown事件:
1、KeyPress 和KeyDown 、KeyPress之间的区别
1)KeyPress主要⽤来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括⼤⼩写)、⼩键盘等除了F1-12、SHIFT、Alt、Ctrl、Inrt、Home、PgUp、Delete、End、PgDn、ScrollLock、Pau、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 nder, KeyPressEventArgs e)
{
if (e.KeyChar != 8 && !Char.IsDigit(e.KeyChar) && e.KeyChar != '.')
{
e.Handled = true;
}
}
//或者
private void TextBox_KeyPress(object nder, 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事件:
捕获单个按键:
condlyprivate void Form1_KeyDown(object nder, KeyEventArgs e)
{
Keys key = e.KeyCode;
if (e.Control!=true)//如果没按Ctrl键
return;
switch (key)
{
ca Keys.NumPad0:
//按下⼩键盘0以后
break;
ca Keys.NumPad1:
//按下⼩键盘1以后
break;
ca Keys.S:
//按下S键以后
break;
ca Keys.Up:
//按下向下键以后
break;
}
}
捕获组合键(以全选为例):
private void textBox1_KeyDown(object nder, KeyEventArgs e)
{
if (e.Control && e.KeyCode == Keys.A)
{
(nder 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 = Pau
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 = Inrt
keycode 46 = Delete
keycode 47 = Help
keycode 48 = 0 equal braceright
keycode 49 = 1 exclam onesuperior
keycode 50 = 2 quotedbl twosuperior
keycode 51 = 3 ction threesuperior
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
bulletinboardkeycode 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 micolon
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
forever love什么意思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
procoView Code
6、如何获取键盘按钮的keyChar值(keyCode同理)
脱口秀美国
private void Form1_KeyPress(object nder, KeyPressEventArgs e)
{
joyinchar Key_Char = e.KeyChar;//判断按键的 Keychar
MessageBox.Show(((int)(Key_Char)).ToString());//转成整数显⽰
}
==================================================================
虽然从字⾯理解, KeyDown是按下⼀个键的意思, 但实际上⼆者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, ⽽KeyPress返回的是ASCII字符. 所以根据你的
keydown:⽤户在键盘上按下某按键是发⽣。⼀直按着某按键则会不断触发(opera浏览器除外)。
并产⽣⼀个字符时发⽣(也就是不管类似
发⽣(也就是不管类似shift、alt、ctrl之类的键,就是说⽤户按了⼀个能在屏幕上输出字符的按键keypress事件才会触发)。⼀直按着某
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">
relatives$(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]
<html xmlns="/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 ⼀个完整的按键动作后,才可以获取⽂本框的值。
[html]
<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>