【前端】 - 禁止页面中使用F12/复制/粘贴/鼠标右键操作

【前端】 - 禁止页面中使用F12/复制/粘贴/鼠标右键操作

ltmuxin
2024-02-24 / 0 评论 / 27 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年02月28日,已超过111天没有更新,若内容或图片失效,请留言反馈。

写法一

下面的写法是我从网上找来的,功能倒是能实现,但是有些方法老旧了。
代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>禁止页面中使用F12/复制/粘贴/鼠标右键操作</div>
<script>
    //禁用F12
    window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
        // 判断是否按下F12,F12键码为123
        if (event.keyCode == 123) {
            event.preventDefault(); // 阻止默认事件行为
            window.event.returnValue = false;
        }
    }
    // 禁止鼠标右键
    document.oncontextmenu = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    // 禁止复制
    document.oncopy = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

    // 禁止粘贴
    document.onpaste = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
</script>
</body>
</html>

方法二

方法好多,这里参考官档:

KeyboardEvent对象描述了用户与键盘的交互。比如长按shift键时、按下Ctrl键时、触发的事件。看下官档的几个实例方法就能明白了。
Element,这类中结合上面的KeyboardEvent对象就能实现我们本篇博客的大部分需求了,重点在左边菜单的事件栏。
代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>禁止页面中使用F12/复制/粘贴/鼠标右键操作</title>
</head>
<body>
<div>禁止页面中使用F12/复制/粘贴/鼠标右键操作</div>
<script>
    document.addEventListener('contextmenu', evt => {
        alert("鼠标右键已禁用!")
        evt.preventDefault()
    })


    document.addEventListener('copy', evt => {
        alert("禁止拷贝!")
        evt.preventDefault()
    })

    document.addEventListener('cut', evt => {
        alert("禁止剪切!")
        evt.preventDefault()
    })

    document.addEventListener('keydown', evt => {
        // 所有的键盘事件都会可以通过evt.key或者获取到,你多打印操作下就知道了
        alert(evt.key, evt.code)
        // 因为keyCode的方法不在推荐使用,我们可以通过下面的方法来处理
        // if (evt.keyCode === 123){
        //     alert("禁止F12!")
        //     evt.preventDefault()
        // }
        // 以字符串的形式进行对比,想禁用哪个键直接按照下面的方式写就完了
        // if (evt.key === "F12"){
        //     alert("禁止F12!")
        //     evt.preventDefault()
        // }

    })
</script>
</body>
</html>
0

评论 (0)

取消