事件（event）练习——键盘事件

最新推荐文章于 2024-04-20 10:30:19 发布

一只丽丽猪

最新推荐文章于 2024-04-20 10:30:19 发布

阅读量520

点赞数

分类专栏： JavaScript练习文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/weixin_44522602/article/details/124160596

版权

本文介绍了JavaScript中的键盘事件，包括onkeydown和onkeyup事件，以及如何通过keyCode、altKey、ctrlKey和shiftKey获取按键信息。同时，提供了两个键盘操作的实践例子，用于演示如何利用键盘事件移动元素。

摘要由CSDN通过智能技术生成

键盘事件：一般绑定一些可以获得焦点的对象（如input）或者document

onkeydown, 键盘按下，一直按着泽时间会一直触发，第一次和第二次之间间隔时间稍微长一点，这是为了防止误触误操作
onkeyup：键盘放开

keyCode：按键编码

altKey
ctrlKey
shiftKey

练习1：

<!DOCTYPE html>
<html>

<head>
    <script>
        window.onload = function () {
            document.onkeydown = function (event) {
                event = event || window.event;
                //判断是否同时按下y和ctrl
                if (event.keyCode === 89 && event.ctrlKey) {
                    alert("y and ctrl are pressed");
                }
            }

            var input = document.getElementsByTagName("input")[0];
            input.onkeydown = function (event) {
                event = event || window.event;
                if (event.keyCode >= 48 && event.keyCode <&#