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 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
基本DOM节点操作
Jan 17 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
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
生成sessionid和随机密码的例子
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
原生js二级联动效果
2017/06/20 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
学校校庆演讲稿
2014/05/22 职场文书
任命书范本大全
2014/06/06 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
MongoDB支持的数据类型
2022/04/11 MongoDB