javascript 中 keyup、keypress和keydown事件
1. keydown事件在键盘的键被按下的时候触发,keyup 事件在按键被释放的时候触发
keydown、keypress事件触发在文字还没敲进文本框,这时如果在keydown、keypress事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本
注意:
KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等 除了 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键 外的ANSI字符
KeyPress 只能捕获单个字符,可以捕获单个字符的大小写,不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键
KeyDown 和KeyUp 可以捕获组合键,对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写,区分小键盘和主键盘的数字字符。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能,通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定 )
2 .事件处理流程
在keyup事件中无法阻止浏览器默认事件,因为在keypress时,浏览器默认行为已经完成,即将文字输入文本框(尽管这时还没显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或keypress时阻止
结果为keydown、keypress事件中return false文本框无法输入文字,在keyup事件中return false文本框可以输入文字
文本框的键盘响应事件把textInpput也加进来,触发的顺序为:keydown -> keypress ->textInput -> keyup
textInput事件是DOM3后支持的,主要用来替换keypress,与keypress的主要差别在于添加了对中文输入法的支持,还有一点就是textInput只在可编辑文本区才能触发(如input、textarea),而keypress是任何能获得焦点的控件的能触发(如button),但是textInput事件的支持还不是很好,目前只有safari、chrome支持
3.CTRL+其它键的组合判定代码
backspace 8 left window 91
tab 9 right window 92
enter 13 select key 93
shift 16
ctrl 17 numpad 0 96
alt 18 numpad 1 97
pause/break 19 numpad 2 98
caps lock 20 numpad 3 99
escape 27 numpad 4 100
page up 33 numpad 5 101
Space 32 numpad 6 102
page down 34 numpad 103
end 35 numpad 8 104
home 36 numpad 9 105
arrow left 37
arrow up 38 multiply 106
arrow right 39 add 107
arrow down 40 subtract 109
insert 45 decimal point 110
delete 46 divide 111
0 48 f1 112
1 49 f2 113
2 50 f3 114
3 51 f4 115
4 52 f5 116
5 53 f6 117
6 54 f7 118
7 55 f8 119
8 56 f9 120
9 57 f10 121
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
javascript 中 keyup、keypress和keydown事件的更多相关文章
- js keyup、keypress和keydown事件
js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件. keydown event k ...
- js keyup、keypress和keydown事件 详解
js keyup.keypress和keydown事件 详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...
- keypress和keydown事件及keyCode和keyChar
二:keypress和keydown事件: 现只在IE10.chrome(版本 32.0.1700.107 m).firefox(25.0.1)中测试了. IE8 chrome firefox $ ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- 请写出JavaScript中常用的三种事件。
请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange
- 转载关于KeyPress和KeyDown事件的区别和联系
KeyDown:在控件有焦点的情况下按下键时发生. KeyPress:在控件有焦点的情况下按下键时发生. KeyUp:在控件有焦点的情况下释放键时发生. 1.KeyPress主要用来接收字母.数字等A ...
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- javascript中注册和移除事件的4种方式
对于html中的一些元素注册事件的方式有多种 第一种: 复制代码代码如下: <script> function test() { alert("OK"); } < ...
- JS中keyup, keypress, keydown以及oninput四个事件的区别
$email_input.onkeyup=function(event){ // console.log('event handle');//按方向键以及backspce esc有反应 长按字母键也没 ...
随机推荐
- c++ - How to use wstring and wcout to output Chinese words in Xcode? - Stack Overflow
c++ - How to use wstring and wcout to output Chinese words in Xcode? - Stack Overflow How to use wst ...
- iOS7.0中UILabel高度调整注意事项(转)
注释:原文链接丢失. 我的“记词助手”在升级到iOS7之后,一直出现UILabel错位的问题: 我的label是用- (CGSize)sizeWithFont:(UIFont *)font const ...
- 佩特来项目经验小集合(2)___组合查询存储过程,报错 "varchar JBID='' 转换成数据类型 int 时失败"
今天写一个组合查询的存储过程遇到这样一个问题:在将 varchar 值 'SELECT * FROM View_DLS_WXJD_Customer WHERE 1=1 and JBID ='' ...
- ASP.NET mvc4 WEB API异常处理
当一个web api抛出一个异常后 此异常会被转化成一个HTTP响应 错误代码为500的服务错误 但是如果你不想让客户端看到500的错误码 你也可以自定义错误码 如下代码当用户输入的ID没有与之相关的 ...
- 两种Makefile
.PHONY:clean CC=g++ CFLAGS=-Wall -g BIN=test_queue OBJS=Queue.o test_main.o $(BIN):$(OBJS) $(CC) $(C ...
- 使用SuperWebSocket 构建实时 Web 应用
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- 兼容所有浏览器的CSS3圆角
兼容所有浏览器的CSS3圆角 解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...
- iOS8的新特性
iOS8的几个重要变化: 家庭分享.用户可以创建家庭分享,除创建者之外最多可以加入6个家庭成员.通过该功能,用户可以和家人分享位置.照片.日历.应用程序.音乐和视频等. 键盘.苹果在iOS8之后开放了 ...
- gtest的Linux使用(Google test)
GTest是Google开发的跨平台而且开源的C++单元测试框架,很好很强大. 下载地址:https://code.google.com/p/googletest/ . 关于GTest在Windows ...
- mysql学习笔记--第1天
1.像网页上的账户.图片.文章都是存在数据库里面2.Oracle .DB2 .SQL server等等多钟数据库 PHP中选择使用mysql PHP+mysql黄金搭档 PHP和mysql都是开源的, ...