（12）HTML5-键盘按键事件监听

来源：互联网发布：windows软件性能测试编辑：程序博客网时间：2024/05/19 16:49

既然有鼠标事件，自然也有键盘按键事件可以使用了。在HTML5游戏中，键盘事件有许多重要的应用，例如调用快捷键功能，或是通过上下左右键（或wasd键）来控制游戏中角色的移动。常用的键盘按键事件包括：按下一个键（keydown），按住（keypress），放开（keyup）等。

{onKeyDown}

此事件可以检测玩家按下键盘上的某一个按键，并判断键值后做出相应的操作，此事件可用在<form>,<image>,<link>,<textarea>标签中。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>    </script> </head> <body >    <form name="f1">    <input type="text" name="key" onKeyDown="alert('检测到按键')">    </form> </body></html>

当然那么简单的按键是没有办法满足游戏开发需求的，因此需要加入判断玩家按下了哪一个按键的功能，才能根据按键值来执行相应的操作。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>     document.write("按下B键返回");     function keyCheck(e){        var keynum;        <!-- 把键值转化为‘键码’ -->        var keychar;        if(window.event){//IE浏览器下的事件            keynum=e.keyCode;        }        else{//非IE浏览器下的事件            keynum=e.which;        }        keychar = String.fromCharCode(keynum);        if(keychar=="B"){            alert("返回上一个画面");        }     }    </script> </head> <body >     <input type="text" onkeydown="keyCheck(event)"/> </body></html>

{keypress}，{keyup}

按住与放开是一组由两个操作所组成的键盘检测事件，与keydown不同的是，keypress在按键持续按住的过程中会不断地执行我们所设置的功能，而keydown只会在按键按下时执行一次，keypress在游戏开发中适用于使用键盘操控游戏角色的移动。这两项功能可用于<image>,<link>,<form>,在IE中也可以用于<body>标签内。

按住键盘的键背景变红色，放开后变黄色。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <script>    </script> </head> <body >    <form>    <input type="text" name="key" onKeyPress="document.bgColor='red'" onKeyUp="document.bgColor='yellow'"/>    </form> </body></html>

0 0