在form中, submit的快捷键是 enter,reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下:
1. 如果表单里有一个type="submit"的按钮,回车键生效。
2. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。
3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
5. type="image"的input,效果等同于type="submit"。不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。
除了在按钮中绑定键盘事件外,浏览器还有一个accesskey 属性来指定链接的快捷键。注意 accesskey 的设置如果和浏览器的菜单相同,会优先于菜单。在IE中,快捷键是 alt + 设置的键值,FF是Alt+Shift+ 设置的键值。 在IE 中,a元素的 accesskey 只是使焦点转移到链接上,并不等同于点击,FF 中则相当于点击。与他对比的是,input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。另外,我们还可以配合label标签来加强语义,个人是十分推荐这种做法的。
剩下的就需要编程了。javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。
由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup 键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、 onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup 的keyCode对主副键盘的数字键敏感。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
我们可以利用以下脚本来监听网页中的键盘事件,一旦用户按下Enter键便开始你绑定的事件。
复制代码 代码如下:
function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 13 || keycode == 108){ //如果按下ENTER键
//在这里设置你想绑定的事件
}
}
// 把keyup事件绑定到document中
function listenKey ( ) {
if (document.addEventListener) {
document.addEventListener("keyup",getKey,false);
} else if (document.attachEvent) {
document.attachEvent("onkeyup",getKey);
} else {
document.onkeyup = getKey;
}
}
最后附上,键盘中所有按钮的keycode一览
字母和数字键的键码值(keyCode)
按键
键码
按键
键码
按键
键码
按键
键码
A
65
J
74
S
83
1
49
B
66
K
75
T
84
2
50
C
67
L
76
U
85
3
51
D
68
M
77
V
86
4
52
E
69
N
78
W
87
5
53
F
70
O
79
X
88
6
54
G
71
P
80
Y
89
7
55
H
72
Q
81
Z
90
8
56
I
73
R
82
0
48
9
57
数字键盘上的键的键码值(keyCode)
功能键键码值(keyCode)
按键
键码
按键
键码
按键
键码
按键
键码
0
96
8
104
F1
112
F7
118
1
97
9
105
F2
113
F8
119
2
98
*
106
F3
114
F9
120
3
99
+
107
F4
115
F10
121
4
100
Enter
108
F5
116
F11
122
5
101
-
109
F6
117
F12
123
6
102
.
110
7
103
/
111
控制键键码值(keyCode)
按键
键码
按键
键码
按键
键码
按键
键码
BackSpace
8
Esc
27
Right Arrow
39
-_
189
Tab
9
Spacebar
32
Down Arrow
40
.>
190
Clear
12
Page Up
33
Insert
45
/?
191
Enter
13
Page Down
34
Delete
46
`~
192
Shift
16
End
35
Num Lock
144
[{
219
Control
17
Home
36
;:
186
\|
220
Alt
18
Left Arrow
37
=+
187
]}
221
Cape Lock
20
Up Arrow
38
,<
188
'"
222
另外我们还可以用event.altKey,event.ctrlKey,event.metaKey(上有微软的旗帜),event.shiftKey来判断对应的键是否被按下,因为它们都是返回一个布尔值。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下:
1. 如果表单里有一个type="submit"的按钮,回车键生效。
2. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效。
3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
5. type="image"的input,效果等同于type="submit"。不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。
除了在按钮中绑定键盘事件外,浏览器还有一个accesskey 属性来指定链接的快捷键。注意 accesskey 的设置如果和浏览器的菜单相同,会优先于菜单。在IE中,快捷键是 alt + 设置的键值,FF是Alt+Shift+ 设置的键值。 在IE 中,a元素的 accesskey 只是使焦点转移到链接上,并不等同于点击,FF 中则相当于点击。与他对比的是,input type=checkbox 的 accesskey 效果不论在IE 还是 FF 中都是点击。另外,我们还可以配合label标签来加强语义,个人是十分推荐这种做法的。
剩下的就需要编程了。javascript事件主要通过以下三个事件来捕获键盘事件:onkeydown,onkeypress与onkeyup。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。
由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup 键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、 onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和副键盘数字键的,而onkeydown、onkeyup 的keyCode对主副键盘的数字键敏感。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
我们可以利用以下脚本来监听网页中的键盘事件,一旦用户按下Enter键便开始你绑定的事件。
复制代码 代码如下:
function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 13 || keycode == 108){ //如果按下ENTER键
//在这里设置你想绑定的事件
}
}
// 把keyup事件绑定到document中
function listenKey ( ) {
if (document.addEventListener) {
document.addEventListener("keyup",getKey,false);
} else if (document.attachEvent) {
document.attachEvent("onkeyup",getKey);
} else {
document.onkeyup = getKey;
}
}
最后附上,键盘中所有按钮的keycode一览
另外我们还可以用event.altKey,event.ctrlKey,event.metaKey(上有微软的旗帜),event.shiftKey来判断对应的键是否被按下,因为它们都是返回一个布尔值。
标签:
javascript,键盘事件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“javascript 键盘事件总结 推荐”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。