JavaScript键盘事件经典案例

最新推荐文章于 2025-04-05 18:01:44 发布

御弟謌謌

最新推荐文章于 2025-04-05 18:01:44 发布

阅读量1.5k

点赞数 2

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/abraham_ly/article/details/110110235

版权

前端专栏收录该内容

52 篇文章

订阅专栏

JavaScript键盘事件五大经典案例

1、什么是键盘事件

键盘事件就是我们对键盘的操作触发绑定元素对象的相关函数，比如敲击键盘上的某个键，按住键盘上的某个键，按组合快捷键后元素做出的函数行为……等这些都是键盘事件的体现。

2、常用键盘事件

事件	说明
onkeydown	当按下某个键时触发的事件
onkeypress	当按下某个键时触发的事件(不识别功能键，如ctrl、shift…等)
onkeyup	当按下某个键松开是触发的事件

注意：

如果使用监听添加事件的方式，则不需要添加on

元素对象.addEventListener("事件类型(不加on)"，function(e){});

onkeypress与onkeyup和onkeydown最大的区别就在于不能识别功能键
keydown和keyup的事件对象是相同的，事件都不区分字母大小写(默认大写)，keypress则会区分大小写
如果一个元素分别绑定了这个三个事件，则触发的顺序为：keydown=》keypress=》keyup
在实际开发中，使用更多的是keydown和keyup，因为它门能够识别键盘上的所有键

3、常用属性和方法

keyCode

该属性可以识别大小写，并返回其对应的ASCII值，一般我们使用该属性来判断用户的按键操作
e.preventDefault()

该方法阻止默认事件（标准）
e.stopPropagation()

该属性阻止事件冒泡
return false

既阻止默认事件的触发，又阻止事件冒泡

4、案例

4.1 京东搜索框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东搜索框</title>
    <style>
        input {
            display: block;
            width: 300px;
            height: 25px;
            border: 2px solid #e2231a;
            background-color: #ffffff;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <input type="text" placeholder="金典京东超级宠粉日，抢199键100券">
    <script>
        window.onload = function() {
            // 获取文本输入框
            var tBox = document.querySelector("input");
            // 给文档对象添加键盘按钮弹起的事件
            document.addEventListener("keyup", function(e) {
                // 如果按下的键是s键
                if (e.keyCode == 83) {
                    // 文本输入框获取焦点
                    tBox.focus()
                }
            })
        }
    </script>
</body>

</html>

4.2 快递单号输入查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快递单号输入查询</title>
    <style>
        .box {
            width: 250px;
            margin: 100px auto;
            position: relative;
        }
        
        .poput {
            width: 160px;
            padding: 5px 5px;
            line-height: 20px;
            font-size: 12px;
            background-color: #f1f1f1;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
            position: absolute;
            left: 80px;
            top: 2px;
            display: none;
        }
        
        .poput::before {
            content: "";
            width: 0;
            height: 0;
            border: 7px solid red;
            border-color: #f1f1f1 transparent transparent;
            position: absolute;
            top: 30px;
            left: 20px;
        }
        
        .lastBox {
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            公司名称：<input type="text" placeholder="圆通快递" disabled="disabled">
        </div>
        <div class="poput">123</div>
        <div class="lastBox">
            快递单号：<input type="text" id="text">
        </div>

    </div>
    <script>
        window.onload = function() {
            // 获取文本输入框
            var text = document.querySelector("#text");
            // 获取弹出框
            var poput = document.querySelector(".poput");

            // 给文本框添加键盘按键弹起事件
            text.addEventListener("keyup", function(e) {
                // 判断文本输入框是否为空
                if (this.value == "") {
                    // 为空弹框就隐藏
                    poput.style["display"] = "none";
                } else {
                    // 否则弹框出现，并且将文本输入框内的值赋值给弹出框
                    poput.style["display"] = "block";
                    poput.innerText = this.value;
                }
            })

            // 给文本输入框添加失去鼠标焦点时的事件
            text.addEventListener("blur", function() {
                // 失去焦点后，弹框隐藏
                poput.style["display"] = "none";
            })

            //给文本输入框添加鼠标获取焦点时的事件
            text.addEventListener("focus", function() {
                // 判断文本输入框是否为空
                if (this.value == "") {
                    // 为空弹框就隐藏
                    poput.style["display"] = "none";
                } else {
                    // 否则弹框出现，并且将文本输入框内的值赋值给弹出框
                    poput.style["display"] = "block";
                    poput.innerText = this.value;
                }
            })
        }
    </script>
</body>

</html>

4.3 文字禁止选中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件实现文字禁止选中功能</title>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p>
    <script>
        // onselectstart 禁止选中事件
        //触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
        var p = document.querySelector("p");
        p.addEventListener("mouseover", function(e) {
            console.log(e.target);
            /* user-select 是css3新增的属性，用于设置用户是否能够选中文本。
            可用于除替换元素外的所有元素
            取值：
            [none]：文本不能被选中
            [text]：可以选择文本（默认）
            [all]：当所有内容作为一个整体时可以被选中。如果双击或者在上下文上点击子元素，
                那么被选中的选择的部分将是以该子元素向上回溯的最高祖先元素
            [Element]：可以选择文本，但选择范围受元素边界的约束
            */
            e.target.style["userSelect"] = " none";
        })
    </script>
</body>

</html>

4.4 禁止右击菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现一个标签禁止右键菜单功能</title>

</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现一个标签禁止右键菜单功能</title>
        <style>
            p {
                text-indent: 2em;
            }
        </style>
    </head>

    <body>
        <p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p>
        <script>
            var p = document.querySelector("p");
            /* 
            oncontextmenu:该事件在元素中用户右击鼠标时触发并打开上下文菜单
             */
            p.addEventListener("contextmenu", function(e) {
                //returnValue：取消事件的默认动作（非标准）
                e.returnValue = false;
                // preventDefault()：或者取消事件的默认动作（标准）
                e.preventDefault();
            })
        </script>
    </body>

    </html>
    <p></p>
    <script>
        window.onload = function() {

        }
    </script>
</body>

</html>

4.5 自定义鼠标光标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片替换光标功能</title>
    <style>

    </style>
</head>

<body>
    <div></div>
    <script>
        window.onload = function() {
            document.addEventListener("mouseover", function(e) {
                // [cursor]：该属性规定要显示的光标类型(形状)
                // 该属性规定鼠标指针放在元素边界范围内时所有的光标形状
                e.target.style["cursor"] = "url(./images/鼠标光标.png),auto";
            })
        }
    </script>
</body>

</html>