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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
JS上传图片预览插件制作(兼容到IE6)
2016/08/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
详解React 条件渲染
2020/07/08 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
学习python的几条建议分享
2013/02/10 Python
Python functools模块学习总结
2015/05/09 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
生物科学专业个人求职信范文
2013/12/07 职场文书
元旦晚会主持词
2014/03/24 职场文书
兽医医药专业求职信
2014/07/27 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2015年库房工作总结
2015/04/30 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers