Develop Reference

JavaScript, Print Screen and copy and paste

I got some code from the internet, below, and used it in a mock exam application I am doing. This is suppose to prevent people from Printing Screen, copying or cutting from the exam page. The code works perfectly well in Internet Explorer but does not work in the other browsers. I need help to make the code below work in the other browsers to avoid cheating at the site during mock exam. Below is the code:
<script type="text/javascript">
function AccessClipboardData() {
try {
window.clipboardData.setData('text', "No print data");
} catch (err) {
txt = "There was an error on this page.\n\n";
txt += "Error description: " + err.description + "\n\n";
txt += "Click OK to continue.\n\n";
alert(txt);
}
}
setInterval("AccessClipboardData()", 300);
document.onkeydown = function (ev) {
var a;
ev = window.event;
if (typeof ev == "undefined") {
alert("PLEASE DON'T USE KEYBORD");
}
a = ev.keyCode;
alert("PLEASE DON'T USE KEYBORD");
return false;
}
document.onkeyup = function (ev) {
var charCode;
if (typeof ev == "undefined") {
ev = window.event;
alert("PLEASE DON'T USE KEYBORD");
} else {
alert("PLEASE DON'T USE KEYBORD");
}
return false;
}

Please know that it is entirely impossible to prevent users from copying or screencapping your site from javascript, seeing how they could simply disable js or your function in particular as has been mentioned in the comments already.
If you simply want to discourage people as much as possible you can still use your code, however window.clipboardData.setData only works in IE so it is not strange you would get an error message in other browsers, for thos you would have to use execCommand to copy a set message to the clipboard at you set interval
documnet.execCommand(delete, false, null)
to delete the current selection and then
documnet.execCommand(copy, false, null)
to copy the currently selected text(which you just made sure was nothing)
(for more info on execCommand https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)
this should work in Firefox, Safari and Chrome, I know of no way to do this in Opera, as neither command will work in that browser
Note however that this will keep overwritting your clipboard as long as the site is open in the browser, so even if someone tried to copy something else entirely they would be unable.
I would like to point out that I provide this function only to show you what the problem with your code, as you will never be able to do what you want to completely without getting people to install third party rights management software on their computer.

I find the following code at Stackoverflow here, by iDhavalVaja and it worked fine.
<script type="text/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>

If you just want to get this working in other browsers, maybe use jQuery (something like this):
$(document).keydown(function (e) {
alert("PLEASE DON'T USE KEYBORD");
});

How to call one Script function from another

I try to validate Required fields in Java script. It will works fine on Chrome,Firefox.But it will not works for Textbox in IE at the same the scripts was works on DropDownlist validation on Submit button Click.
My Script For Validate Text Box:
function validateRecepitMaster() {
if ((!IsBlank(Pay_Amount))) {
ShowLabel(spPay_Amount);
spPay_Amount.innerHTML = "*";
Pay_Amount.focus();
return false;
}
}
function IsBlank(obj) {
if (obj) {
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
The Working Script for DropDown
if (Cust_Id.value == "") {
ShowLabel(spCust_ID);
spCust_ID.innerHTML = "*";
Cust_Id.focus();
return false;
}
Above Both scripts woks fine on Chrome, Firefox, and not works at IE.
Thanks in advance

add below script before run yours:
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g, '');
};

Look in your console for the error that IE throws.
A possible candidate is:
obj.value.trim()
IE might not support trim (yet)

redirecting not working in firefox

I have a little function to redirect a person to page of search results based on a text value input and the redirect function that I used in Javsacript works fine in IE and Google Chrome but however does not work in fireFox.
$(document).on("click", "input[name='btnSearchTest']", function () {
//alert('test');
var txtBoxValue = $('#txtSearchGeneral').val();
if (txtBoxValue == "") {
alert("Please enter a value");
return false;
}
window.event.returnValue = false;
document.location = "SearchResults.aspx?search=" + txtBoxValue;
Any advice perhaps on how to get redirecting done using javascript in firefox
regards

Use
window.location.href = "SearchResults.aspx?search=" + txtBoxValue;

Try this
window.location.href = "SearchResults.aspx?search=" + txtBoxValue;

Script becomes unresponsive crashing firefox

Why does this script cause an error on submit in firefox?
It is using jquery.
$(document).ready(function(e) {
$('#errorMessage').hide();
$('#form').submit(function() {
var firstname = $('#formFirstname').val();
if(firstname == '') {
$('#errorMessage').html('Please enter your Name.');
$('#errorMessage').fadeIn();
}
else {
$('#errorMessage').html('Please wait a moment as the form Submits.');
$('#form').submit();
}
return false;
})
});

$('#form').submit();
causes recursion?

You are aliasing the jQuery to e.
Change $(document).ready(function(e) { to $(document).ready(function() {
Or jQuery(document).ready(function($) {
Edit:
Although it may not cause the error, in your code e is also jQuery's alias, e('#form') will also work.

Disabling right click on images using jquery

I want to know how to disable right click on images using jQuery.
I know only this:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
</script>

This works:
$('img').bind('contextmenu', function(e) {
return false;
});
Or for newer jQuery:
$('#nearestStaticContainer').on('contextmenu', 'img', function(e){
return false;
});
jsFiddle example

what is your purpose of disabling the right click. problem with any technique is that there is always a way to go around them. the console for firefox (firebug) and chrome allow for unbinding of that event. or if you want the image to be protected one could always just take a look at their temporary cache for the images.
If you want to create your own contextual menu the preventDefault is fine. Just pick your battles here. not even a big JavaScript library like tnyMCE works on all browsers... and that is not because it's not possible ;-).
$(document).bind("contextmenu",function(e){
e.preventDefault()
});
Personally I'm more in for an open internet. Native browser behavior should not be hindered by the pages interactions. I am sure that other ways can be found to interact that are not the right click.

For Disable Right Click Option
<script type="text/javascript">
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>

In chrome and firefox the methods above didn't work unless I used 'live' instead of 'bind'.
This worked for me:
$('img').live('contextmenu', function(e){
return false;
});

For modern browsers all you need is this CSS:
img {
pointer-events: none;
}
Older browsers will still allow pointer events on the images, but the CSS above will take care of the vast majority of visitors to your site, and used in conjunction with the contextmenu methods should give you a very solid solution.

The better way of doing this without jQuery:
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('contextmenu', event => event.preventDefault());
}

Would it be possible to leave the ability to right click and download just when done a separate watermark is placed on the image. Of course this won't prevent screen shots but thought it may be a good middle ground.

You could try this :
var message="Sorry, right-click has been disabled";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
Checkout a demo here

A very simple way is to add the image as a background to a DIV then load an empty transparent gif set to the same size as the DIV in the foreground. that keeps the less determined out. They cant get the background without viewing the code and copying the URL and right clicking just downloads the transparent gif.

This should work
$(function(){
$('body').on('contextmenu', 'img', function(e){
return false;
});
});