JavaScript onkeydown事件入门实例(键盘某个按键被按下)


Posted in Javascript onOctober 17, 2014

JavaScript onkeydown 事件

用户按下一个键盘按键时会触发 onkeydown 事件。与 onkeypress 事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键),onkeypress 事件只响应字符键按下后的处理。

提示

Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。

onkeydown 获取用户按下的键

下面是一个利用 onkeydown 事件获取用户按下键盘按键信息的例子:

<html>

<body>

<script type="text/javascript">
function noNumbers(e)

{

    var keynum;

    var keychar;
    keynum = window.event ? e.keyCode : e.which;

    keychar = String.fromCharCode(keynum);

    alert(keynum+':'+keychar);

}
</script>

<input type="text" onkeydown="return noNumbers(event)" />

</body>

</html>

如上面例子所示,event.keyCode/event.which 得到的是一个按键对应的数字值(Unicode 编码),常用键值对应如下:

数字值 实际键值
48到57 0到9
65到90 a到z(A到Z)
112到135 F1到F24
8 BackSpace(退格)
9 Tab
13 Enter(回车)
20 Caps_Lock(大写锁定)
32 Space(空格键)
37 Left(左箭头)
38 Up(上箭头)
39 Right(右箭头)
40 Down(下箭头)

在 Web 应用中,常常可以看到利用 onkeydown 事件的 event.keyCode/event.which 来获取用户的一些键盘操作,从而运行某些运用的例子。如在用户登录时,如果按下了大写锁定键(20),则加以提示大写锁定;在有翻页的时候,如果用户按下左右箭头,触发上下翻页等。

获得 Unicode 编码值之后,如果需要得到实际对应的按键值,可以通过 Srting 对象的 fromCharCode 方法(String.fromCharCode())获得。注意,对于字符获得的始终是大写字符,而对于其他一些功能按键,得到的字符可能不太易阅读。

 PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

Javascript 相关文章推荐
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Vue精简版风格概述
Jan 30 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 #Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 #Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 #Javascript
让IE8浏览器支持function.bind()方法
Oct 16 #Javascript
jquery获取radio值(单选组radio)
Oct 16 #Javascript
js数组的基本操作(很全自己整理的)
Oct 16 #Javascript
Javascript中的关键字和保留字整理
Oct 16 #Javascript
You might like
PHP实现合并discuz用户
2015/08/05 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python入门篇之正则表达式
2014/10/20 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
商业融资计划书
2014/04/29 职场文书
公司股东合作协议书
2014/09/14 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
劳资员岗位职责
2015/02/13 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记