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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
原生js+ajax分页组件
Jan 30 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与XML联手进行网站编程代码实例
2008/07/10 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
jQuery入门知识简介
2010/03/04 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript date格式化示例
2013/09/25 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
什么是Smart Navigation?
2016/07/03 面试题
高中历史教学反思
2014/02/08 职场文书
品质主管岗位职责
2014/03/16 职场文书
供货协议书
2014/04/22 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Go语言grpc和protobuf
2022/04/13 Golang