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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python集合用法实例分析
2015/05/30 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python yield 使用方法浅析
2017/05/20 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python异步Web框架sanic的实现
2020/04/27 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
生产部管理制度
2014/01/31 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
生日赠语
2015/06/23 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL