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事件与功能说明大全:

http://tools.jb51.net/table/javascript_event

JavaScript onkeydown事件入门实例(键盘某个按键被按下)的更多相关文章

  1. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  2. JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  3. 前端之JavaScript 04 事件 (未全)

    一.事件类型 常见的主要事件类型介绍如下: onfocus 元素获得焦点. 练习:输入框 onblur 元素失去焦点. 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行 ...

  4. javascript——常用事件总结

      Event对象:Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件标签属性 当以下情况发生时,出现此事件 onabort 图像加载被中断 ...

  5. JavaScript DOM事件对象的两个小练习 | 学习内容分享

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 本文用于记录个人学习过程 ...

  6. 第一百一十九节,JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  7. JavaScript事件---事件入门

    内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. ...

  8. onkeyup 事件会在键盘按键被松开时发生

    定义和用法 onkeyup 事件会在键盘按键被松开时发生. 语法 onkeyup="SomeJavaScriptCode" 参数 描述 SomeJavaScriptCode 必需. ...

  9. JavaScript(第二十三天)【事件入门】

    JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码.   一.事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和 ...

随机推荐

  1. 洛谷P2532 [AHOI2012]树屋阶梯(Catalan数)

    P2532 [AHOI2012]树屋阶梯 题目描述 输入输出格式 输入格式: 一个正整数N(1<=N<=500),表示阶梯的高度. 输出格式: 一个正整数,表示搭建方法的个数.(注:搭建方 ...

  2. jzoj6009. 【THUWC2019模拟2019.1.18】Counting (dp)

    Description 羽月最近发现,她发动能力的过程是这样的: 构建一个 V 个点的有向图 G,初始为没有任何边,接下来羽月在脑中构建出一个长度为 E 的边的序列,序列中元素两两不同,然后羽月将这些 ...

  3. [Xcode 实际操作]七、文件与数据-(7 )使用UserDefaults检测App是否首次运行

    目录:[Swift]Xcode实际操作 本文将演示UserDefaults的使用,它常被用于存储程序的配置数据. 当关闭程序之后,再次打开程序时,之前存储的数据依然可以从UserDefaults里读取 ...

  4. 剑指Offer的学习笔记(C#篇)-- 数组中只出现一次的数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 题目给定:num1,num2分别为长度为1的数组.传出参数:将  num1[0], num2[0 ...

  5. VUE中模块与组件

    组件:我们项目中,每一个资源(.js,.css,.vue,...)都是一个模块,这些模块是相互独立,但是我们可以通过类似于webpack构建工具把它们整合在一起,你可以理解为模块就是一个一个积木,通过 ...

  6. python进阶01 面向对象、类、实例、属性封装、实例方法

    python进阶01 面向对象.类.实例.属性封装.实例方法 一.面向对象 1.什么是对象 #一切皆对象,可以简单地将“对象”理解为“某个东西” #“对象”之所以称之为对象,是因为它具有属于它自己的“ ...

  7. Codeforces 161C(分治、性质)

    要点 因为当前最大字符只有一个且两边是回文的,所以如果答案包含最大字符则一定是重合部分. 若不包含,则用此字符将两个区间分别断为两部分,则共有四种组合,答案一定为其中之一. #include < ...

  8. hibernate Restrictions用法 HibernateTemplate Hibernate结合spring

    常用方法 http://www.jb51.net/article/41541.htm ........................................... 博客分类: Hiberna ...

  9. NET Core使用Quartz

    NET Core使用Quartz 一.前言运用场景 Quartz.Net是一个强大.开源.轻量的作业调度框架,在平时的项目开发当中也会时不时的需要运用到定时调度方面的功能,例如每日凌晨需要统计前一天的 ...

  10. linux中c表示字符设备文件符号

    linux中c表示字符设备文件,b表示块设备文件,l表示符号链接文件,r表示可读权限,w表示可写权限.linux文件属性解读:文件类型:-:普通文件 (f)d:目录文件b:块设备文件 (block)c ...