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 判断字符串是否为数字的简单方法
Jul 25 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
js实现tab栏切换效果
Aug 02 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
php递归函数怎么用才有效
2018/02/24 PHP
jquery 操作DOM案例代码分享
2012/04/05 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
实例详解Python模块decimal
2019/06/26 Python
Python中断多重循环的思路总结
2019/10/04 Python
wxPython实现绘图小例子
2019/11/19 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
留学经费担保书
2014/05/12 职场文书
搞笑车尾标语
2014/06/23 职场文书
工程质量保证书
2015/05/09 职场文书
2015国庆节宣传语
2015/07/14 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书