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+CSS图片幻灯切换特效
Nov 20 Javascript
jquery图片切换实例分析
Apr 15 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
javascript实现左右缓动动画函数
Nov 25 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
详解JavaScript函数
2015/12/01 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
angular动态表单制作
2018/02/23 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python如何实现定时器功能
2020/05/28 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
在Python中实现字典反转案例
2020/12/05 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
社区工作者思想汇报
2014/01/13 职场文书
岗位职责的构建方法
2014/02/01 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
教学质量月活动总结
2015/05/11 职场文书
妈妈别哭观后感
2015/06/08 职场文书
建房合同协议书
2016/03/21 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js