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. codevs 3342绿色通道

    3342 绿色通道  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold

  2. InnoDB Monitors | SHOW ENGINE INNODB STATUS

    参考 <mysql 5.7手册>,15.17章节 InnoDB监视器提供有关InnoDB内部状态的信息. 这些信息对于性能调优非常有用.其实所谓的监视器,就是 show engine in ...

  3. 多媒体文件嵌入HTML中自动转码工具

    神器网址:https://iframely.com/embed 首先上传视频文件到服务器,视频管理网址平台 比如:   https://wistia.com/ 然后进入到 iframely 网址.复制 ...

  4. 了解HTTP协议和TCP协议

    HTTP(超文本传输协议),互联网上应用最为广泛的一种网络协议.所有的www文件都必须遵守这个标准.HTTP是一个客户端和服务端请求和应答的标准(TCP):客户通过浏览器发起一个到服务器上指定端口的H ...

  5. IT兄弟连 Java语法教程 Java语言的其他特性

    Java语言中除了非常重要的跨平台特性外,还有如下几个关键特性: ●  语法简单易学 Java语言的语法简单明了,容易掌握,而且是纯面向对象(OOP)的语言,Java语言的简单性主要体现在以下几个方面 ...

  6. PJzhang:子域名发掘工具Sublist3r

    猫宁!!! 参考链接:https://www.freebuf.com/sectool/90584.html 作者上一次更新是2018年10月16日了,sublist3r中融合有另外一个子域名爆破工具S ...

  7. Hexo写作系列(3) - 文章标题含有双引号"导致页面渲染失败无法打开

    问题 在用Hexo写文章时,如果文章标题含有双引号",也就是说如果在文件头里的title出现双引号,如下: --- title: Hexo - 文章标题含有双引号"导致页面渲染失败 ...

  8. POJ 3299

    #include <iostream> #include "math.h" double e2h(double e) { return 0.5555*(e-10.0); ...

  9. 练习三十：Python回文数判断编程练习。

    说到回文数,大家可能会比较的陌生,但是在我们的日常生活中常会遇到这样的数字,只是你不知道它是回文数罢了. 例如:12321,这组数字就是回文数. 设n是一任意自然数.若将n的各位数字反向排列所得自然数 ...

  10. plsql过期注册

    Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca 打开plsql工具 点击注册即可