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 相关文章推荐
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
纯JS实现简单的日历
Jun 26 Javascript
详解原生JS回到顶部
Mar 25 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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 Session存储到Redis的方法
2013/11/04 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Firefox div高度自适应
2009/04/28 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
利用python循环创建多个文件的方法
2018/10/25 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
岗位职责范本
2013/11/23 职场文书
办理退休介绍信
2014/01/09 职场文书
化学教学随笔感言
2014/02/19 职场文书
法人委托书
2014/07/31 职场文书
2014年度培训工作总结
2014/11/27 职场文书
幼儿学前班评语
2014/12/29 职场文书
七一晚会主持词
2015/06/29 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书