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

更新时间:2023-07-13 23:37:58 阅读: 评论:0

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');
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⽀持。
=================================================================
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事件:
捕获单个按键:
private 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
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 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
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
View Code
6、如何获取键盘按钮的keyChar值(keyCode同理)
private void Form1_KeyPress(object nder, KeyPressEventArgs e)
{
char 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">
$(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>t9550
中所周知,jquery封装了很多事件交互⽅法,这⾥讲到的问题在原⽣js中也是有的。
keyup是在⽤户将按键抬起的时候才会触发的,属于整个按键过程中的最后阶段,所以有其特定的⽤处,就是在左侧输⼊,右侧同步显⽰的过程中很有⽤处。典型的例⼦就是邮件编辑预览的应⽤。
[html]
<html xmlns="www.w3/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>

本文发布于:2023-07-13 23:37:58,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1095152.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:事件   键盘   触发   字符   按键   数字   属性   捕获
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图