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 相关文章推荐
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
微信小程序事件流原理解析
Nov 27 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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python实现弹窗祝福效果
2019/04/07 Python
python多线程http压力测试脚本
2019/06/25 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
公司开业庆典主持词
2014/03/21 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
三国演义读书笔记
2015/06/25 职场文书
毕业典礼主持词
2015/06/29 职场文书
安全温馨提示语大全
2015/07/14 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Python常遇到的错误和异常
2021/11/02 Python