JavaScript onkeydown事件入门实例(键盘某个按键被按下)

 更新时间:2014年10月17日 09:21:26   投稿:junjie  
这篇文章主要介绍了JavaScript onkeydown事件入门实例,onkeydown事件捕捉键盘上某个按键被按下的情况,需要的朋友可以参考下

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实现的一个随机点名功能

    javascript实现的一个随机点名功能

    这篇文章主要介绍了JS实现的一个随机点名功能,逻辑简单,用在班级或活动时是个不错的选择,需要的朋友可以参考下
    2014-08-08
  • javascript cookie基础应用之记录用户名的方法

    javascript cookie基础应用之记录用户名的方法

    这篇文章主要介绍了javascript cookie基础应用之记录用户名的方法,涉及javascript基于cookie针对数据存储的简单应用,需要的朋友可以参考下
    2016-09-09
  • 再探JavaScript作用域

    再探JavaScript作用域

    这篇文章主要介绍了再探JavaScript作用域,本文用简洁的语言和直观的测试结果图片给大家讲解JavaScript的作用域,需要的朋友可以参考下
    2014-09-09
  • arguments对象

    arguments对象

    arguments对象...
    2006-11-11
  • JavaScript入门教程(12) js对象化编程

    JavaScript入门教程(12) js对象化编程

    关于对象化编程的语句 现在我们有实力学习以下关于对象化编程,但其实属于上一章的内容了。
    2009-01-01
  • document.open() 与 document.write()

    document.open() 与 document.write()

    document.open() 与 document.write()...
    2006-10-10
  • JavaScript基础知识之数据类型

    JavaScript基础知识之数据类型

    JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object,Object本质上是由一组无序的名值对组成的
    2012-08-08
  • Javascript学习笔记5 类和对象

    Javascript学习笔记5 类和对象

    首先,不得不说,我无法达到抛开类和对象的概念来看Javascript的境界,对于Javascript是否是面向对象的说法有很多,不过我最认同的还是Javascript是一种“基于prototype的面向对象语言”。
    2010-01-01
  • JS限制上传图片大小不使用控件在本地实现

    JS限制上传图片大小不使用控件在本地实现

    文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件。使用JS可以轻松解决词问题,本文详细介绍,需要了解的朋友可以参考下
    2012-12-12
  • JavaScript中的this机制

    JavaScript中的this机制

    简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑。希望看完这篇文章了你能回答出来this到底指引个甚。
    2016-01-01

最新评论