I know that it's impossible to thwart the world's most advanced minds, but I'd like to put the slightest of barriers on my website to keep my students from copying text from it and posting that text as their answer. (If they hand type it, that's ok).
I'm just so afraid of JavaScript because of cross browser inconsistencies.
Given that I have jQuery loaded and prefer to use jQuery whenever possible, how do I:
Selecting text, copy, the right click can be disabled on a web page easily using jQuery. Below is the simple jQuery code snippet which can do this task easily:
<script type="text/javascript">
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>
Source: Disable right click, copy, cut on web page using jQuery
Its some how daunting to create a function that would do that, what you should target is, clearing the clipboard so even if, the user press Ctrl + C, nothing is copied into the clipboard, a simple function like this should do the trick :
<script language="javascript">
function clearData(){
window.clipboardData.setData('text','')
}
function cldata(){
if(clipboardData){
clipboardData.clearData();
}
}
setInterval("cldata();", 1000);
</script>
<body ondragstart="return false;" onselectstart="return false;" oncontextmenu="return false;" onload="clearData();" onblur="clearData();">
although this can still be defeated....
Just add the following code right before closing </HEAD> tag of your web page:
<script>
function killCopy(e){
return false;
}
function reEnable(){
return true;
}
document.onselectstart=new Function ("return false");
if (window.sidebar){
document.onmousedown=killCopy;
document.onclick=reEnable;
}
</script>
I would suggest you to use:
<div oncopy="return false;">Here you have protected text</div>
Support for this method could be found here: http://help.dottoro.com/ljwexqxl.php
It is simple and in my opinion sufficient against regular users. To be honest there is no option to fully prevent copying text. One can always use for example Chrome Developer Tools and copy even dynamically loaded text from there.
For more effective protection you should place oncopy in <body> tag because otherwise it is possible to copy text by starting selection from outer <div>.
If you have your texts in particular divs, you could put a transparent div on top of those divs. Secondly, you could make all your protected text dynamic, and inject it into the divs from javascript where is would exist in a coded form -- that would defeat a 'view-source'.
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>
<script type="text/JavaScript">
function killCopy(e){ return false }
function reEnable(){ return true }
document.onselectstart=new Function ("return false");
if (window.sidebar)
{ document.onmousedown=killCopy;
document.onclick=reEnable; }
</script>
//By using above code you right click will be disabled as well as no one can copy your page content
A simple and valid solution - bind to the 'copy' event and prevent it. You can also set what text will be copied (and later pasted by the user).
document.addEventListener('copy', function (e){
e.preventDefault();
e.clipboardData.setData("text/plain", "Do not copy this site's content!");
})
Selecting text, copy, the right click can be disabled on a web page easily using jQuery. Below is the simple jQuery code snippet which can do this task easily:
<script type="text/javascript">
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>
Source: Disable right click, copy, cut on web page using jQuery
To achieve that you need to block mouse click and context menu click on your webpage.
Here is a sample code:
<script language="JavaScript1.2">
var msgpopup="COPYING CONTENT IS PROHIBITED";
function handle(){
if(toShowMessage== "1") alert(message);
if(closeSelf== "1") self.close();
return false;
}
function mouseDown() {
if (event.button == "2" || event.button == "3"){handle();}
}
function mouseUp(e) {
//if (document.layers || (document.getElementById && !document.all)){
if (e.which == "2" || e.which == "3"){ handle();}
//}
}
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
document.oncontextmenu=new Function("alert(msgpopup);return false")
</script>
You can put the text in an input tag attributed as readonly and prevent the user from copy using JS. So, user cannot copy it even from developer menu.
If you're trying to achieve this with react, you can achieve this by:
useEffect(() => {
const preventCopyPaste = (e: any) => {
e.preventDefault();
};
document.documentElement.addEventListener("cut", preventCopyPaste);
document.documentElement.addEventListener("copy", preventCopyPaste);
document.documentElement.addEventListener("paste", preventCopyPaste);
return () => {
document.documentElement.removeEventListener(
"cut",
preventCopyPaste,
);
document.documentElement.removeEventListener(
"copy",
preventCopyPaste,
);
document.documentElement.removeEventListener(
"paste",
preventCopyPaste,
);
};
}, []);
jQuery('html').on('contextmenu cut copy', function() { return false; });
© 2022 - 2024 — McMap. All rights reserved.