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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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中让curl支持sock5的代码实例
2015/01/21 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
Vue.directive使用注意(小结)
2018/08/31 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python实现股市信息下载的方法
2015/06/15 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
一些网络技术方面的面试题
2014/05/01 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python