键盘事件（JavaScript）

最新推荐文章于 2024-04-23 21:21:46 发布

~历桑

最新推荐文章于 2024-04-23 21:21:46 发布

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50053454/article/details/123135850

版权

三种键盘事件：

onkeydown：键盘按下（持续按下会连续触发）
onkeyup：键盘抬起
onkeypress：键盘长按（建议使用keydown代替）

键盘事件的事件目标可以是input输入框，也可以是window窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        var input = document.querySelector("input")

        // 键盘按下 (持续按下会连续触发)
        input.onkeydown = function(){
            console.log("键盘按下")
        }
        // 键盘抬起
        input.onkeyup = function(){
            console.log("键盘抬起")
        }
        // 键盘长按 (建议使用keydown代替)
        input.onkeypress = function(){
            console.log("键盘长按")
        }

        // 键盘事件的事件目标可以是input输入框,也可以是window窗口
        window.onkeydown = function(e){
            console.log("在浏览器窗口显示在上层时,按下键盘", e)

            // 获取点击的键
            console.log(e.key)

            // 有些键有默认行为,如f5会刷新页面,可以阻止事件默认行为
            e.preventDefault()
            // e.preventDefault()只能阻止页面级默认行为, 系统级行为无法阻止, 如电源键, window菜单键

            // 监听组合键
            if(e.ctrlKey && e.key == 'a'){
                console.log("全选")
            }


            // 需求: 禁止网页内容被复制或下载保存
            if(e.ctrlKey && e.key == "c"){
                // e.preventDefault() // 阻止页面信息被复制
                alert("请尊重作者版权")
            }
            if(e.ctrlKey && e.key == "s"){
                // e.preventDefault() // 阻止页面信息被保存
                alert("请尊重作者版权")
            }
            if(e.key == "f12"){
                // e.preventDefault() // 阻止f12调控制台
                alert("请尊重作者版权")
            }
        }
        window.oncontextmenu = function(e){
            e.preventDefault()  // 阻止右键菜单
            alert("请尊重作者版权")
        }

    
    
    
    </script>
</body>
</html>

~历桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘事件（JavaScript）

三种键盘事件：onkeydown：键盘按下（持续按下会连续触发） onkeyup：键盘抬起 onkeypress：键盘长按（建议使用keydown代替）键盘事件的事件目标可以是input输入框，也可以是window窗口<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev.
复制链接

扫一扫