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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
nodejs基础知识
2017/02/03 NodeJs
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
如何用Python合并lmdb文件
2018/07/02 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
幼儿园亲子活动总结
2014/04/26 职场文书
大学生求职信例文
2014/06/29 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书