JavaScript键盘按键侦测

温带烧烤

已于 2022-11-03 13:25:51 修改

阅读量7.2k

点赞数 9

文章标签： javascript 前端 html 按键事件

于 2022-02-11 11:37:23 首次发布

本文链接：https://blog.csdn.net/Minecraftable/article/details/122876043

版权

既然是简单学习，那复杂的部分就先暂时省略【手动滑稽】

在键盘按键侦测时，有三种不同的状态：按下（down），放开（up），按下并放开（press）

这里是一个简单的对整个页面的按键侦测：

<!DOCTYPE html>

<html onkeydown="win()">         <!--对整个页面的侦测-->
	<head>
		<meta charset="utf-8">
		<title>键盘按键侦测</title>
    </head>

    <body>
        <script>
            function win(){
                alert("你按下一个键");   //检测到键盘按键时调用
            }
        </script>
    </body>
</html>

把函数调用的事件放在html元素里（也可以根据需要放在不同元素内），这样在整个页面中，用户一旦按下键盘任何按键就会调用函数，执行函数内的代码。其中，第三行的onkeydown（按下）可以换成onkeyup（放开）和onkeypress（按下并放开）。

优点是简单方便，缺点是不能具体的侦测到用户按下的是哪一个按键。

所以要再简单修改一下：

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>键盘按键侦测</title>
    </head>

    <body>
        <script>
            document.addEventListener("keydown",keydown);
            function keydown(event){          // 传递传递参数event
                if (event.keyCode == 87){     // “87”为按键W，可根据需要修改为其他
                    alert("你按下了W键");      // 按下后执行的代码
                }
            }
        </script>
    </body>
</html>

这样就可以侦测到具体的每一个按键，比如图中的87即为w，再执行需要的代码。按键与对应的键码值看表：