捕捉键盘可能是与用户交互中最有力的形式了。可以设置按下或释放任何的键来控制对象。
第一件事就是怎样
初始化事件。这里是基本的初始化设置“onkeydown”事件:
document.onkeydown=keyDown
当这个代码被加入后,浏览器就知道当键盘被按动时,keyDown()函数将调用。无论调用什么函数都没有关系,并且,在函数名后不必跟上括号。要捕捉哪个键被按下,两种浏览器有些细微的差异,现在分别介绍:
对于 Netscape [size=medium][/size]
Netscape 由于使用了事件指针,因此处理键盘事件显得有些“苛刻”。必须加入一段特别的代码来告诉Netscape一直检查keydown事件。如果没有这一行代码,那么当其他事件(如mousedown)发生时,会有些混乱。
document.onkeydown=keyDown
if(ns4) document.captureEvents(Event.KEYDOWN)
keyDown()需要跳过一个隐含变量----我们将使用“e”字母作为例子,因为在英语单词中字母“e”最常用。
function keyDown(e)
这个“e”可以是代表刚刚按下的任意一个键,如果要知道那是一个什么键,可以使用which属性:e.which
这将返回被按下的那个键的代码(而不是字母或数字)。要把代码转变为字母或数字,可以使用:
String.fromCharCode(e.which)
因此,我们可以把它们放在一起,并且写一个函数来弹出一个消息框告诉我们被按下的键的键盘码和真正的键盘值:
function keyDown(e) {
var keycode=e.which
var realkey=String.fromCharCode(e.which)
alert("keycode:"+keycode+"\nrealkey:"+realkey)
}
document.onkeydown=keyDown
document.captureEvents(Event.KEYDOWN)
可以使用 Netscape 来试验一下这段代码:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
function keyDown(e) {
var keycode=e.which
var realkey=String.fromCharCode(e.which)
alert("keycode:"+keycode+"\nrealkey:"+realkey)
}
document.onkeydown=keyDown
document.captureEvents(Event.KEYDOWN)
//-->
</script>
</HEAD>
<BODY>
<p>请按一个键.</p>
</BODY>
</HTML>
请务必注意:如果使用Internet Explorer来测试,那么会收到IE发出的错误警告框。
对于Internet Explorer
如果使用IE来获取键盘码,那么可以跳过“e”值,可以直接使用window.event.keyCode以代替e.which。至于转换成真正键盘值的代码则是一样的:String.fromCharCode(event.keyCode)
可以使用 Internet Explorer来试验:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
function keyDown(e) {
var keycode=event.keyCode
var realkey=String.fromCharCode(event.keyCode)
alert("keycode:"+keycode+"\nrealkey:"+realkey)
}
document.onkeydown=keyDown
//-->
</script>
</HEAD>
<BODY>
<p>请按一个键.</p>
</BODY>
</HTML>
我们可以运行以上程序,并且按键盘上的键.
同样以上代码用Netscape来检测,也会出现错误警告。
将两者结合
两大浏览器之争确实给我们带来了不小的麻烦,于是不得不寻找一段适合于两者的代码。但两种浏览器使用的是不同的字符设置。这里,建议彻底忘却真正的键盘值,仅仅使用键盘码,下面这段代码将指定“nkey”为键盘码。如果使用Netscape,那么“iekey”将会是0;反之,“nkey”设定为0。
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ns4=(document.layers)?true:false
ie4=(document.all)?true:false
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)
//-->
</script>
</HEAD>
<BODY>
<p>请按一个键。</P>
</BODY>
</HTML>
可以同时使用Internet Explorer和Netscape来试验这个例子,看看它们之间对比的效果:
用键盘来移动元素
上面说了那么多有关于捕捉键盘的基础知识,现在该轮到实践了,让我们用所学的东西来做一些有趣的事情。我们可以用键盘来激活前面所提到的移动函数,先检测哪个键被按下,然后调用相应的函数来使对象移动。
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)
}
这个例子完整的写法如下:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ns4=(document.layers)?true:false
ie4=(document.all)?true:false
function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
document.onkeydown=keyDown
if(ns4) document.captureEvents(Events.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){
slide()
}
}
function slide() {
block.xpos+=5
block.left=block.xpos
status=block.xpos
setTimeout("slide()",30)
}
//-->
</script>
</HEAD>
<BODY onLoad="init()">
<p>请按“A”键使图像滑动</p>
<div id="blockDiv" style="position:absolute;left:25;top:50;width:40">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
可以使用Internet Explorer或者Netscape来检验这个例子,键入“A”图像就会移动。不过很快就会发现上面这个例子的致命缺点,我们将在下面的内容中讨论。
理解“Active”变量
如果亲自用浏览器运行过上面的例子会发现一个现象:一旦图像开始滑动,我们无法使它停下来,而且越是按“A”键,它跑得越快,直到选择“刷新”。我们必须想办法解决这个问题,使用一个叫做“Active”变量的技术代表当前的移动状态,也就是判断一下:“对象现在正在移动吗?”一旦掌握了这种技术,那它就会变得非常灵活方便。大多数的移动函数都是循环执行的,它们在建立的时候并没有指定结束循环的方法,这里就需要用到这个“Active”变量。
function slide() {
if(myobj.active) {
myobj.xpos+=5
myobj.left=myobj.xpos
setTimeout("slide()",30)
}
}
在这种情况下,slide()函数将仅仅在myobj.active值为“true”时运行。一旦设置的myobj.active值为“false”,那么移动函数就会停止。
使用“onKeyUp”事件
“onkeyup”事件与“onkeydown”是一样的。可以像下面这样初始化事件:
document.onkeydown=keyDown
document.onkeyup=keyUp
if(ns4) document.captureEvents(Event.KEYDOWN|Event.KEYUP)
“keyUp()”函数也是同样的,但是我们需要使当时在移动的对象在键盘释放后即停止。要做到这一点,我们可以设置的激活变量为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
}
为了使代码具有更高的可靠性,需要加上更多的检测函数。“keyDown”函数里,“&&!block.active”确认了在没有块被激活的情况下才调用函数。换句话说,如果块在移动,就不要执行slide()函数了。然后把激活值设为“真”并且让块移动。“slide()”有“if(block.active)”语句以保证它仅在激活值为真时移动块,也正因为那样,当用户释放键盘时,执行也停止了。
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) {//如果“A”键被按下
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 //如果“A”键被释放
}
}
function slide() {
if(block.active) {
block.xpos+=5
block.left=block.xpos
status=block.xpos
setTimeout("slide()",30)
}
}
终于我们能够使用键盘完全地控制页面对象了,可以用两种浏览器来试验下面的完整例子,当按下“A”键时,图像开始滑动,当释放“A”键时,图像就会立刻停止滑动:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ns4=(document.layers)?true:false
ie4=(document.all)?true: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) {//如果“A”键按下
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
}
}
function slide() {
if(block.active) {
block.xpos+=5
block.left=block.xpos
status=block.xpos
setTimeout("slide()",30)
}
}
//-->
</script>
</HEAD>
<BODY onLoad="init()">
<p>按下“A”键移动对象,放开“A”键停止。</p>
<div id="blockDiv" style="position:absolute;left:25;top:90;width:40">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
可以使用的键
正如前面提到过的,Netscape和Internet Explorer的字符设置不同,它们各有优点:
l Netscape可以辨别按键的大小写,而IE不能。
l 但是Internet Explorer可以检测到大多数的键像Ctrl、Shift、Alt和方向键而Netscape不能做到。
下面有个小例子,如果使用Internet Explorer,它能返回ieKey;反之则返回nKey的值:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ns4=(document.layers)?true:false
ie4=(document.all)?true:false
function keyDown(e) {
if(ns4) {
var nKey=e.which
document.keyform.keytext.value="nKey="+nKey
}
if(ie4) {
var ieKey=event.keyCode
document.keyform.keytext.value="ieKey="+ieKey
}
}
document.onkeydown=keyDown
if(ns4) document.captureEvents(Event.KEYDOWN)
//-->
</script>
</HEAD>
<BODY>
<p>这是一个小小的工具,用来返回浏览器的 nKey 值或 ieKey 值。
<br>返回值的类型是根据你所使用的浏览器类型来决定的。</p>
<form name="keyform">
<input type="text" name="keytext" value="请按一个按钮" size=12>
</form>
</BODY>
</HTML>
当使用Internet Explorer检验这段代码时,在文本框中返回的是“ieKey”值,同样Netscape返回的是“nKey”值。
基本游戏控制
这里有一个彻底利用键盘控制页面上对象的例子,这种技术与我们最终的目的:游戏控制已经相差无几了。请看源程序:
<HTML>
<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--
ns4=(document.layers)?true:false
ie4=(document.all)?true:false
function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
block.xpos=parseInt(block.left)
block.ypos=parseInt(block.top)
block.activeleft=false
block.activeright=false
block.activeup=false
block.activedown=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==52 || ieKey==100) && !block.activeleft) {//4 left
block.activeleft=true
block.activeright=false
slideleft()
}
if((nKey==54 || ieKey==102) && !block.activeright) {//6 right
block.activeright=true
block.activeleft=false
slideright()
}
if((nKey==56 || ieKey==104) && !block.activeup) {//8 up
block.activeup=true
block.activedown=false
slideup()
}
if((nKey==50 || ieKey==98) && !block.activedown) {//2 down
block.activedown=true
block.activeup=false
slidedown()
}
}
function keyUp(e) {
if(ns4) {var nKey=e.which;var ieKey=0}
if(ie4) {var ieKey=event.keyCode;var nKey=0}
if(nKey==52 || ieKey==100) block.activeleft=false
if(nKey==54 || ieKey==102) block.activeright=false
if(nKey==56 || ieKey==104) block.activeup=false
if(nKey==50 || ieKey==98) block.activedown=false
}
function slideleft() {
if(block.activeleft) {
block.xpos-=5
block.left=block.xpos
status="x:"+block.xpos+"y:"+block.ypos
setTimeout("slideleft()",20)
}
}
function slideright() {
if(block.activeright) {
block.xpos+=5
block.left=block.xpos
status="x:"+block.xpos+"y:"+block.ypos
setTimeout("slideright()",20)
}
}
function slideup() {
if(block.activeup) {
block.ypos-=5
block.top=block.ypos
status="x:"+block.xpos+"y:"+block.ypos
setTimeout("slideup()",20)
}
}
function slidedown() {
if(block.activedown) {
block.ypos+=5
block.top=block.ypos
status="x:"+block.xpos+"y:"+block.ypos
setTimeout("slidedown()",20)
}
}
//-->
</script>
</HEAD>
<BODY onLoad="init()">
<p>
单击任意键控制图像
<br>2=向下,4=向左,6=向右,8=向上
</p>
<div id="blockDiv" style="position:absolute;left:50;top:75;width:40">
<img src="../image/block.gif">
</div>
</BODY>
</HTML>
当初始化页面时,显示一个静止的图像,在页面上提示用户可以利用小键盘上的2、4、6、8代表后、左、前、右四个方向控制图像的走向。当用户按下其中任何一个键不放,图像会按照指定的方向滑动。需要注意的是,这个图像的运动速度与在“控制面板”中设定的键盘重复速率有关。并且当同时按下相邻的两个方向的键时,图像会按照圆形的轨迹运动。因为它们在水平方向和垂直方向的增量相同。
分享到:
相关推荐
使用系统调用fork()创建两个子进程,再用系统调用signal()让父进程捕捉键盘上的中断信号(即按DEL键);当捕捉到中断信号后,父进程用系统调用Kill()向两个子进程发出信号,子进程捕捉到信号后分别输出下列信息后终止: ...
标题中的"vb Hook 监听 捕捉键盘,鼠标事件"指的是通过钩子(Hook)技术来捕获并处理这些用户输入事件。 钩子是一种Windows操作系统提供的机制,允许应用程序设置一个或多个“陷阱”,当特定类型的事件发生时,系统...
在VB(Visual Basic)编程环境中,捕捉键盘事件是创建用户交互功能的重要部分。VB提供了丰富的事件处理机制,允许程序员响应用户的键盘输入。本教程将详细解释如何在VB中实现键盘事件的捕捉,并通过分析给定的文件...
【C#钩子函数详解:捕捉键盘消息】 钩子函数是Windows操作系统中的一种核心机制,它允许程序员在特定事件(如消息、鼠标操作或键盘输入)发生时进行干预。在C#中,虽然通常我们使用.NET框架提供的高级API来处理用户...
用JAVASCRIPT代码来编写一个捕捉键盘,这里是源代码!希望能帮助你们
标题中的“网吧登陆界面,windows应用可以捕捉键盘事件”指的是创建一个特定的Windows应用程序,用于网吧环境,这个程序能够监听并处理键盘输入事件。在网吧环境中,为了防止用户通过快捷键或其他方式轻易关闭该程序...
在探讨“Wince下 DataGrid编辑并捕捉键盘上下左右移动”的知识点时,我们首先需要理解几个核心概念:Wince环境、DataGrid控件以及键盘事件处理。Wince,即Windows CE,是微软针对嵌入式设备开发的操作系统,广泛应用...
在对话框程序中实现“热键”,此程序可以同时判断2个按键按下的功能,并且不让后续控制响应这些按键,对于一些控制程序和“热键”的实现是一个比较好的例子,程序中对话框为CDlgKeyBoardPress类,自行添加了一个响应...
在Web开发中,捕捉键盘事件以及获取按键的键值是十分常见的需求,尤其在需要键盘快捷操作的应用场景中,比如快捷键的设定、表单验证、游戏开发等。本文将详细介绍如何使用JavaScript捕捉键盘事件以及获取按键键值的...
总之,这个"DirectInput基于单文档 捕捉键盘输入信息并显示"的程序是一个很好的学习案例,它演示了如何在MFC环境下利用DirectInput与键盘交互,同时展示了如何将输入信息实时反映到视图上。这种技术对于需要高度响应...
在C#编程中,捕获键盘输入是一种常见的需求,特别是在开发需要监听用户键盘活动的应用时。键盘钩子(Keyboard Hook)是一种系统级别的机制,允许应用程序拦截和处理键盘事件,即使焦点不在该应用上也能实现。本篇...
实验一:信号机制 实验目的 1、了解什么是信号 2、熟悉LINUX系统中进程之间软中断通信的基本原理 实验内容 1、编写程序:用fork( )创建两个子进程,再用系统调用signal( )让父进程捕捉键盘上来的中断信号(即按^c键...
在Windows Forms(Winform)开发中,理解和掌握键盘和鼠标事件的捕捉与重写是至关重要的,这将有助于创建更加用户友好且响应灵敏的应用程序。本文将深入探讨如何在Winform应用中处理键盘输入事件、鼠标滚轮事件,并...
在IT领域,键盘捕捉工具是一种专门用于记录用户在计算机上键入内容的软件。这种工具在多种场景下都有其用途,比如系统监控、安全分析、软件测试或是家长控制等。键盘捕捉,也被称为键盘记录或键盘logging,是这类...
在QT中,我们可以利用其丰富的API来实现对鼠标和键盘事件的实时捕获和处理,这对于创建交互性强的应用程序至关重要。下面我们将深入探讨如何在QT中实现这一功能。 首先,我们关注的是“实时捕获鼠标事件”。在QT中...
标题中提到的知识点是如何在JavaScript中捕捉键盘上按下的键。在Web开发中,能够响应用户键盘事件是一个很常见的需求,它可以让用户与页面进行更丰富的交互。通过JavaScript,我们能够通过监听键盘事件来捕捉用户按...
在Windows编程中,有时我们需要对用户的输入行为进行监控或拦截,比如在开发特定的应用时,可能需要捕获键盘事件。WPF(Windows Presentation Foundation)作为.NET Framework的一部分,提供了丰富的UI设计和交互...
怎么处理(不存在从 "CString" 到 "LPCWSTR" 的适当转换函数); MFC对话框程序,如何适当的处理(回车键和esc键退出); 如何把键盘输入捕获并保存在内存或者硬盘优盘等存储设备。