Trouble disabling the Print Screen, Copy/Paste and right-click functionalities using JavaScript
Question
I am having difficulties in implementing a JavaScript code to disable the Copy/Paste, Print Screen and right-click (context menu) using JavaScript and jQuery.
The problem is that if I comment out the code block of jQuery involving disabling the copy paste and the right click functionalities, the Print Screen functionality does not get disabled (I've tested out by pasting in MS Paint).
Here is my code:
<!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>
1 answers
solution1
0 2021-07-24 15:03:36
Use this CSS instead of javascript, this will prevent selecting text in the browser.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.