使用JS监听键盘按下事件(keydown event)


Posted in Javascript onNovember 07, 2019

1、监听全局键盘按下事件,例如监听全局回车事件

$(document).keydown(function(event){
 if(event.keyCode == 13){
  alert('你按下了Enter'); 
 }
});

2、监听某个组件键盘按下事件,例如监听id为btn的button组件的回车按下事件

$("#btn").keydown(function(event){
 if(event.keyCode==13){
  alert('你按下了Enter');      
 }
});

3、如果是要监听组合键,例如监听ctrl+c

$(document).keyup(function(event){
if(event.ctrlKey && event.keyCode==67){


alert('你按下了CTRL+C')

}
});

4、详细keyCode值列表

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

使用JS监听键盘按下事件(keydown event)

 js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件

当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

keydown event
keypress event
keyup event

keydown事件发生在键盘的键被按下的时候,接下来触发keypress事件。 keyup 事件在按键被释放的时候触发。

这三个事件在页面中的使用方法如下例:

<input id="testkeyevent" name="testkeyevent" onKeyUp="keyup()" />
<input id="testkeyevent" name="testkeyevent" onkeypress="keypress()" />
<input id="testkeyevent" name="testkeyevent" onkeydown="keydown()" />

对应的js函数:

function keyup(){ ...}
function keypress(){ ...}
function keydown(){ ...}

注意:

KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键)
KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
KeyPress 可以捕获单个字符的大小写
KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此,我们如何来判定?

通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定 )

这里简单的列举出CTRL+其它键的组合判定代码:

private void Form3_KeyUp(object sender, KeyEventArgs e){
if (e.Control){
MessageBox.Show("KeyUp:Ctrl+" + e.KeyValue.ToString());
}
}

捕获PrScrn按键事件

通过一种钩子的方式可以判定PrScrn 按键事件,钩子可以获取任何键盘事件。
以下是一些键盘上的键对应的Code:以下是一些键盘上的键对应的Code:

键盘按键 对应的数码
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
Space 32
page down 34
end 35
home 36
arrow left 37
arrow up 38
arrow right 39
arrow down 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
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
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121

总结

以上所述是小编给大家介绍的使用JS监听键盘按下事件(keydown event),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
vue.js循环radio的实例
Nov 07 #Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 #Javascript
vue遍历对象中的数组取值示例
Nov 07 #Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PDO::rollBack讲解
2019/01/29 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue axios同步请求解决方案
2017/09/29 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
教师对学生的寄语
2014/04/03 职场文书
四风问题查摆材料
2014/08/25 职场文书
2015年超市工作总结
2015/04/09 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书