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 date对象的减法处理实现代码
Dec 28 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
Vue3.0 手写放大镜效果
Jul 25 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操作JSON格式数据的实现代码
2011/12/24 PHP
PHP导入导出Excel代码
2015/07/07 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
页面中js执行顺序
2009/11/09 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python调用服务接口的实例
2019/01/03 Python
详解Python用户登录接口的方法
2019/04/17 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
董存瑞观后感
2015/06/11 职场文书
暂住证证明
2015/06/19 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python