键盘控制事件应用教程大全


Posted in Javascript onNovember 24, 2006

获取键盘控制事件是实现交互性最有力的方法之一。 

 首先需要了解的是如何初始化该事件,基本语句如下: 

 document.onkeydown = keyDown 

 当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数。 

 捕获键盘事件对于不同的浏览器来说有点困难,我们分别的来学习不同浏览器的实现语句。 

 Netscape 

 Netscape的程序实现要比IE麻烦,你必须放一个特别的语句,来使Netscape始终去检查击键事件,如果没有这行语句,击键事件将与按下鼠标事件搞混。特别语句如下: 

 document.onkeydown = keyDown 
if (ns4) document.captureEvents(Event.KEYDOWN) 

 keyDown()函数有一个隐藏的变量--一般的,我们使用字母“e”来表示这个函数。 

 function keyDown(e) 

 变量e表示发生击键事件,寻找是哪个键被按下,使用以下属性: 

 e.which 

 这将给出该键的索引值,把索引值转化成该键的字母或数字值,写: 

 String.fromCharCode(e.which) 

 把上面的语句放在一起,我们可以知道被按下的是哪一个键: 

 function keyDown(e) { 

var keycode = e.which 

var realkey = String.fromCharCode(e.which) 

alert("keycode: " + keycode + " realkey: " + realkey) 

 document.onkeydown = keyDown 
document.captureEvents(Event.KEYDOWN) 

 Internet Explorer 

 IE的程序与Netscape类似,但它不需要e变量,用window.event.keyCode来代替e.which,把键的索引值转化为真实键值方法类似:String.fromCharCode(event.keyCode),程序如下: 

 function keyDown() { 

 var keycode = event.keyCode 

 var realkey = String.fromCharCode(event.keyCode) 

 alert("keycode: " + keycode + " realkey: " + realkey) 

document.onkeydown = keyDown 
document.onkeydown = keyDown 

 适用于两者的程序 

 用两种浏览器检查上述实例,你会发现执行结果不总是一样的,这是因为两种浏览器的键盘代码设置不相同,因此你必须使用单独的代码分别来写这段程序,而毫无别法。 

 建议你要完全忘掉实际的键值,仅仅使用键盘的代码值来工作。下面这段程序将视情况而设置,如果是用IE的话,ieKey生效,把nKey设为0,如果是用Netscape的话,nKey生效,把nKey设为0,然后用一个警示框来显示两者的值: 

 function keyDown(e) { 

if (ns4) { 

 var nKey=e.which; 

 var ieKey=0 


if (ie4) { 

 var ieKey=event.keyCode; 

 var nKey=0 


alert("nKey:"+nKey+" ieKey:" + ieKey) 

document.onkeydown = keyDown 
if (ns4) document.captureEvents(Event.KEYDOWN) 

 使用键盘移动对象 

 下面的程序实现用键盘移动对象,程序将检查哪一个键被按下,从而调用相应的函数来移动对象。本例中,当字母“A”被按下时,对象就开始移动,字母“A”键在nKey中的值是97,ieKey的值为65,在程序中将分别检查这两个值。 

 function init() { 

if (ns4) block = document.blockDiv 

if (ie4) block = blockDiv.style 

block.xpos = parseInt(block.left) 

document.onkeydown = keyDown 

if (ns4) document.captureEvents(Event.KEYDOWN) 

function keyDown(e) { 

if (ns4) { var nKey=e.which; var ieKey=0 } 

if (ie4) { var ieKey=event.keyCode; var nKey=0 } 

if (nKey==97 || ieKey==65) { // 如果"A"键按下 

slide() 



function slide() { 

block.xpos += 5 

block.left = block.xpos 

status = block.xpos // 这一句不一定需要,只是为了检查状态 

setTimeout("slide()",30) 

 增加 "Active"变量 

 上面程序稍微有些不足,对象移动以后就无法使它停止了,而且当你多按几次A键时,物体将运动得越来越快,这里我们来修补它。 

 使用变量"active"来改变这种情况,插入if语句来检查函数是否重复。 

 function slide() { 

if (myobj.active) { 

myobj.xpos += 5 

myojb.left = myobj.xpos 

setTimeout("slide()",30) 


 在这种情况中,slide()函数只有在myobj.active值为真的时候才会工作,当myobj.active值为假时,对象将停止移动。 

 使用 onKeyUp 和 "Active" 变量 

 onkeyup事件和onkeydown事件工作原理相同,用以下语句初始化该事件: 

 document.onkeydown = keyDown 
document.onkeyup = keyUp 
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) 

 keyUp() 函数与之相同,当一个键被放开时事件被激发,对象停止移动,并将active变量置为0: 

 function keyUp(e) { 

if (ns4) var nKey = e.which 

if (ie4) var ieKey = window.event.keyCode 

if (nKey==97 || ieKey==65) 

block.active = false 

 下面是比较完整的程序: 

 function init() { 

if (ns4) block = document.blockDiv 

if (ie4) block = blockDiv.style 

block.xpos = parseInt(block.left) 

block.active = false 

document.onkeydown = keyDown 

document.onkeyup = keyUp 

if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) 

function keyDown(e) { 

if (ns4) {var nKey=e.which; var ieKey=0} 

if (ie4) {var ieKey=event.keyCode; var nKey=0} 

if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed 

block.active = true slide() 



function keyUp(e) { 

if (ns4) {var nKey=e.which; var ieKey=0} 

if (ie4) {var ieKey=event.keyCode; var nKey=0} 

if (nKey==97 || ieKey==65) { 

block.active = false // if "A" key is released 



function slide() { 

 if (block.active) { 

block.xpos += 5 

block.left = block.xpos 

status = block.xpos // not needed, just for show 

setTimeout("slide()",30) 

 } 

Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
Javascript操纵Cookie实现购物车程序
Nov 23 #Javascript
删除重复数据的算法
Nov 23 #Javascript
在JavaScript中实现命名空间
Nov 23 #Javascript
js变量作用域及可访问性的探讨
Nov 23 #Javascript
bcastr2.0 通用的图片浏览器
Nov 22 #Javascript
一种JavaScript的设计模式
Nov 22 #Javascript
表单内同名元素的控制
Nov 22 #Javascript
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
angular4自定义组件详解
2017/09/28 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python实现下载文件的三种方法
2017/02/09 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python 实现两个线程交替执行
2020/05/02 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
学生自我鉴定范文
2013/10/04 职场文书
小班评语大全
2014/05/04 职场文书
员工生日会策划方案
2014/06/14 职场文书
员工2014年度工作总结
2014/12/09 职场文书
5.12护士节活动总结
2015/02/10 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers