[英]Trouble disabling the Print Screen, Copy/Paste and right-click functionalities using JavaScript
我在實現 JavaScript 代碼以使用 JavaScript 和 jQuery 禁用復制/粘貼、打印屏幕和右鍵單擊(上下文菜單)時遇到困難。
問題是,如果我注釋掉涉及禁用復制粘貼和右鍵單擊功能的 jQuery 代碼塊,則不會禁用打印屏幕功能(我已經通過在 MS Paint 中粘貼進行了測試)。
這是我的代碼:
<!DOCTYPE html>
<head>
<title>Disable Print Screen Demo</title>
<style>
.container {
background-color: lightblue;
width: 400px;
height: 200px;
margin: 0px 0px 0px 390px;
padding: 50px;
border: 2px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Disable Print Screen Demo</h1>
<hr />
<p>
Try to press the <b>"PrintScreen/SysRq"</b> key on your keyboard.
The user will get an alert that PrintScreen is Disabled and the content
will not be copied to the clipboard.
</p>
</div>
<script>
// Disable Mouse Right Click
$(document).ready(function() {
$("body").on("contextmenu", function(e){
return false;
});
});
// Disable PrintScreen (Screenshot)
document.addEventListener("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 44) {
stopPrntScr();
alert("Print Screen is Disabled!");
}
});
function stopPrntScr() {
var inpFld = document.createElement("input");
inpFld.setAttribute("value", ".");
inpFld.setAttribute("width", "0");
inpFld.style.height = "0px";
inpFld.style.width = "0px";
inpFld.style.border = "0px";
document.body.appendChild(inpFld);
inpFld.select();
document.execCommand("copy");
inpFld.remove(inpFld);
// Disable Cut Copy Paste
$(document).ready(function(){
$('body').bind('cut copy paste', function(e){
e.preventDefault();
});
});
}
</script>
</body>
</html>
使用此 CSS 而不是 javascript,這將阻止在瀏覽器中選擇文本。
<body class="noselect">
your content goes here...
</body>
<style>
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
</style>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.