已迁移-前端 - 禁止页面中使用F12/复制/粘贴/鼠标右键操作
写法1
下面的写法是我从网上找来的，功能倒是能实现，但是有些方法老旧了。
代码示例：
<!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>
写法2
方法好多，这里参考官档：
- 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>
