keyup事件失效

最新推荐文章于 2024-04-17 03:33:52 发布

Su魏

最新推荐文章于 2024-04-17 03:33:52 发布

阅读量1.1k

点赞数

分类专栏： javaScript HTML+CSS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44788220/article/details/128685996

版权

javaScript 同时被 2 个专栏收录

9 篇文章 3 订阅

订阅专栏

HTML+CSS

2 篇文章 0 订阅

订阅专栏

1：例子当我们按下S键时希望输入框自动获取焦点。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="up">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        })
        document.addEventListener('keydown', function(e) {
            alert("我按下键盘了！！！");

        })
        document.onkeydown = function(e) {
            console.log(e.keyCode);
            alert("我按下键盘了！！！");
        }
        document.onkeypress = function() {
            alert("我按下了press键盘了！！！");
        }
    </script>
</body>

</html>

这时，keyup事件竟然失效了，通过注解后，我发现它竟然不能和keydown,或者是keypress同时使用（三个事件同时都注册到一个对象上，keyup就失效了）。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="up">
    <input type="text" id="up2" style="background-color: aquamarine;">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
                // console.log(e.keyCode);
                if (e.keyCode === 83) {
                    search.focus();
                }
            })
            // document.addEventListener('keydown', function(e) {
            //     alert("我按下键盘了！！！");

        // })
        // document.onkeydown = function(e) {
        //     console.log(e.keyCode);
        //     alert("我按下键盘了！！！");
        // }
        // document.onkeypress = function() {
        //     alert("我按下了press键盘了！！！");
        // }
        var up2 = document.querySelector('#up2');
        up2.addEventListener('keydown', function(e) {
            alert("我按下键盘了！！！");

        })
    </script>
</body>

</html>

好鬼扯，但是不知道为什么会这样，我注释后，它就起作用了。