html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

JavaScript onkeydown事件入门实例(键盘某个按键被按下)_基础知识_

[ ] 已经帮助:人解决问题

JavaScript onkeydown 事件TnuHTML5中文学习网 - HTML5先行者学习网

用户按下一个键盘按键时会触发 onkeydown 事件。与 onkeypress 事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键),onkeypress 事件只响应字符键按下后的处理。TnuHTML5中文学习网 - HTML5先行者学习网

提示TnuHTML5中文学习网 - HTML5先行者学习网

Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。TnuHTML5中文学习网 - HTML5先行者学习网

onkeydown 获取用户按下的键TnuHTML5中文学习网 - HTML5先行者学习网

下面是一个利用 onkeydown 事件获取用户按下键盘按键信息的例子:TnuHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
TnuHTML5中文学习网 - HTML5先行者学习网
<html>TnuHTML5中文学习网 - HTML5先行者学习网
<body>TnuHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript">TnuHTML5中文学习网 - HTML5先行者学习网

function noNumbers(e)TnuHTML5中文学习网 - HTML5先行者学习网
{TnuHTML5中文学习网 - HTML5先行者学习网
    var keynum;TnuHTML5中文学习网 - HTML5先行者学习网
    var keychar;TnuHTML5中文学习网 - HTML5先行者学习网

    keynum = window.event ? e.keyCode : e.which;TnuHTML5中文学习网 - HTML5先行者学习网
    keychar = String.fromCharCode(keynum);TnuHTML5中文学习网 - HTML5先行者学习网
    alert(keynum+':'+keychar);TnuHTML5中文学习网 - HTML5先行者学习网
}TnuHTML5中文学习网 - HTML5先行者学习网

</script>TnuHTML5中文学习网 - HTML5先行者学习网
<input type="text" onkeydown="return noNumbers(event)" />TnuHTML5中文学习网 - HTML5先行者学习网
</body>TnuHTML5中文学习网 - HTML5先行者学习网
</html>TnuHTML5中文学习网 - HTML5先行者学习网

TnuHTML5中文学习网 - HTML5先行者学习网

如上面例子所示,event.keyCode/event.which 得到的是一个按键对应的数字值(Unicode 编码),常用键值对应如下:TnuHTML5中文学习网 - HTML5先行者学习网

数字值 实际键值
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(下箭头)
TnuHTML5中文学习网 - HTML5先行者学习网

在 Web 应用中,常常可以看到利用 onkeydown 事件的 event.keyCode/event.which 来获取用户的一些键盘操作,从而运行某些运用的例子。如在用户登录时,如果按下了大写锁定键(20),则加以提示大写锁定;在有翻页的时候,如果用户按下左右箭头,触发上下翻页等。TnuHTML5中文学习网 - HTML5先行者学习网

获得 Unicode 编码值之后,如果需要得到实际对应的按键值,可以通过 Srting 对象的 fromCharCode 方法(String.fromCharCode())获得。注意,对于字符获得的始终是大写字符,而对于其他一些功能按键,得到的字符可能不太易阅读。TnuHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助