js键盘事件

名师点津

已于 2022-03-07 10:45:38 修改

阅读量2.7k

点赞数

分类专栏：笔记文章标签： javascript 开发语言 ecmascript

于 2021-11-09 21:36:10 首次发布

本文链接：https://blog.csdn.net/m0_51281306/article/details/121237400

版权

笔记专栏收录该内容

100 篇文章 1 订阅

订阅专栏

键盘事件是指当用户在操作键盘的时候会自动被触发的事件，通常有以下三种：

( 1) onkeydown: 用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发。

(2) onkeypress: 用户按下任意键都可以触发这个事件 ( 功能键除外 ) 。如果按住不放，事件会被连续触发

(3) onkeyup: 用户释放按键时触发 ps ：键盘事件一般绑定在需要用户输入的元素上(例如 i nput) ，但是由于键盘事件默认采用事件冒泡机制，因此将键盘事件直接绑定在 body 之上也是允许的

键盘属性 key 和 keyCode

属性 Key: 具体是哪一个键

keyCode: 返回 keydown 何 keyup 事件发生的时候按键的代码，以及 keypress 事件的 Unicode 字符 (ascii 码值 ) 。

案例1:

京东按下 s 键定位到搜索框:

检测用户是否按下了 s 键盘，如果按下 s 键，就把光标定位到搜索框里面。

案例分析

利用键盘事件对象里面的 keyCode 判断用户是否按下的是 s 键
搜索框获得焦点的方法: 利用 js 里面的 focus() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <title>京东搜索框</title>
</head>
<body>
    <input type="text" name="" id="">
    <script>
        var input = document.querySelector('input');
        document.addEventListener('keyup', function (e) {
            if (e.keyCode == 83) {
                input.focus();
            }
        });
    </script>
</body>
</html>

案例2:

快递单号查询:

查询快递单号的时候，上面一个更大的盒子显示同样的内容（这里的字号更大）。

案例分析

表单检测用户输入：给表单添加键盘事件
同时把快递单号里面的值（value）获取过来赋值给 con 盒子（innerText）作为内容
当失去焦点的时候，就隐藏这个 con 盒子。
当获得焦点的时候，如果快递单号里面不为空，就显示 con 盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
    .search {
        position: relative;
        width: 178px;
        margin: 100px;
    }
    .con {
        display: none;;
        position: absolute;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
    }
    .con::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
    }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号">
    </div>
    <script>
    var input = document.querySelector('input');
    var con = document.querySelector('.con');
    input.addEventListener('keyup', function(e) {
        if (this.value == '') {
            con.style.display = 'none';
        } else {
            con.style.display = 'block';
            con.innerText = this.value;
        }
    });
    // 当失去焦点的时候，就隐藏这个 con 盒子。
    input.addEventListener('blur', function() {
        con.style.display = 'none';
    });
    // 当获得焦点的时候，如果内容不为空，就显示这个 con 盒子。
    input.addEventListener('focus', function() {
        if (this.value !== '') {
            con.style.display = 'block';
        }
    });
    </script>
</body>
</html>

注意：

keydown 和 keypress 触发的时候，文字还没有落入文本框中。

keyup 触发的时候，文字已经输入到文本框中。