js中键盘事件实例简析
更新时间：2015年01月10日 16:25:36 投稿：shichen2014
这篇文章主要介绍了js中键盘事件,以一个较为简单的实例形式分析了js响应键盘事件的操作技巧,需要的朋友可以参考下
本文实例分析了js中键盘事件。分享给大家供大家参考。具体分析如下：
该实例效果：
按键盘上的任意一个键，弹出相应的ASCII码，兼容ie，chrome和firefox。
但还是有不少问题：
（1）ie和chrome中，一些键没有效果，如上、下、左、右等；
（2）而firefox中的向右键，与单引号键，都为39。
具体代码如下：
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var bd = document.getElementsByTagName('body')[0];
bd.onkeypress = function(ev){
ev = ev || window.event;//ie不支持function参数ev
alert(ev.keyCode || ev.which);//火狐不支持keyCode
}
}
</script>
<style type="text/css">
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
</style>
</head>
<body>
<div id="par">
<div id="son"></div>
</div>
</body>
</html>
<head>
<script type="text/javascript">
window.onload = function(){
var bd = document.getElementsByTagName('body')[0];
bd.onkeypress = function(ev){
ev = ev || window.event;//ie不支持function参数ev
alert(ev.keyCode || ev.which);//火狐不支持keyCode
}
}
</script>
<style type="text/css">
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
</style>
</head>
<body>
<div id="par">
<div id="son"></div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
5款JavaScript颜色选择器(含jQuery插件)。2009-10-10
javascript html5 canvas实现可拖动省份的中国地图
这篇文章主要介绍了javascript html5 canvas实现可拖动省份的中国地图的相关资料,需要的朋友可以参考下2016-03-03
在开发的时候为什么左边的数据出来比右边的慢呢？因为这里没有进行分页，左边的数据多，所以查询相对较慢。怎么解决此问题呢？下面小编给大家带来了JS鼠标滚动分页效果示例，需要的的朋友参考下吧2017-07-07
本文给大家简单介绍了下javascript中的字符串和数组，都是些十分基础的知识，小伙伴们要学好javascript，一定要把这2点理解清楚。2015-06-06
今天小编就为大家分享一篇关于使用JavaScript保存文本文件到本地的两种方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章全面的为大家解析了bootstrap格子布局的相关资料，感兴趣的朋友可以参考一下2016-05-05![非常不错的[JS]Cookie精通之路](//img.jbzj.com/images/xgimg/bcimg6.png)
Cookies，有些人喜欢它们，有些人憎恨它们。但是，很少有人真正知道如何使用它们。现在你可以成为少数人中的成员－可以自傲的 Cookie 大师。2008-06-06
这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下2015-11-11
本文为大家介绍下javascript中普通函数的使用，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
这篇文章主要为大家详细介绍了完美实现js焦点轮播效果的相关代码，采用辅助图片实现图片无限滚动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
![非常不错的[JS]Cookie精通之路](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论