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

最新推荐文章于 2023-07-06 21:06:45 发布

梧桐下的四叶草

最新推荐文章于 2023-07-06 21:06:45 发布

阅读量9.9k

点赞数

分类专栏： HTML5 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52401540

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

既然有鼠标事件，自然也有键盘按键事件可以使用了。在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" οnkeydοwn="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>