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 validate a textarea using javascript

I want to check a textarea whether it is empty or not. For this I write the following code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}​
For the first time it is working fine. But If I remove the text from the textarea the above function is returning true value i.e., it is assuming the previous text I've entered into the textbox. Can anybody kindly tell me where is the problem?

I am getting it correctly. This is what I did.
Click on validate, it said Please Write Problem Description.
Write something and click. Nothing happened.
Remove the text. Click on validate, it said Please Write Problem Description.
Note: Use a trim function to eliminate empty spaces.
Code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if ($.trim(problem_desc.value) == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}
Demo: http://jsfiddle.net/TZGPM/1/ (Checks for Whitespaces too!)

Do check for white space in the value like this
if (problem_desc.value.match (/\S/)) { ... }
or other way check for length
problem_desc.value.length == 0;

Remove spaces and calculate length of the value attribute.
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value.replace(/ /g,'').length) {
return true;
} else {
alert("Please Write Problem Description");
return false;
}
}
<textarea id="problem_desc"></textarea>
<button onclick="validateForm()">Validate</button>

Opposite of disableSelection function for enabling text selection for specific HTML elements

I'm using a JavaScript function called as disableSelection for preventing text selection on specific elements. Declaration of this function is here:
function disableSelection(target)
{
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
I want to disable text selection on the whole page except form elements. If I call disableSelection(document.body), it'll do the job but it'll also disable text selection on form elements (but this happens only on Firefox).
My question is how can I prevent form fields being affected by this text disabler script? I can tag all content except form fields but it requires so much effort.
I'll appreciate any help on this.
Note: I found disableSelection script from here.

by returning false from an event, you will disable the default behavior of the browser (selecting the text). I would therefor modify the function like this;
function disableSelection(target, enable)
{
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return enable}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect=enable?"all":"none";
else //All other route (ie: Opera)
target.onmousedown=function(){return enable}
target.style.cursor = "default"
}
and then call this for your stuff;
disableSelection(document.body, false);
disableSelection(document.forms[0], true);
should work (didn't test it)

script must be under <body> tag. if u want div only disable : disableSelection(document.getElementById('divName'))

This works for me, only tested in chrome:
function enableSelection(target) {
//For IE This code will work
if(typeof target.onselectstart != "undefined") {
target.onselectstart = function() {
return true;
}
}
//For Firefox This code will work
else if(typeof target.style.MozUserSelect != "undefined") {
target.style.MozUserSelect = "all";
}
//All other (ie: Opera) This code will work
else {
target.onmousedown = function() {
return true;
}
target.style.cursor = "default";
}
}

simple jquery on asp.net does not work on firefox

I have been struggling with getting this work on Firefox. Hope there is somebody help me!
Basically; Firefox ignores the button click function and it's sub functions and the button posts the page instead of running the jquery code.
It works on IE and Chrome but not on Firefox.
Thank you for your help in advance.
Here is the output code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".CatList li").click(function() {
if ($(this).is(".selected")) {
$(this).attr("class", "");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
else {
$(this).attr("class", "selected");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
});
$("#ctl00_ContentPlaceHolderRight_btnSave").click(function() {
var elements = $("li.selected");
if (elements.val() == null) {
alert("You must select at least one category");
return false;
}
else {
elements.each(function() {
$('#ctl00_ContentPlaceHolderRight_CatChecked').val($('#ctl00_ContentPlaceHolderRight_CatChecked').val() + "," + $(this).attr("id"));
return true;
});
}
});
});
</script>

Do you know firebug Firefox Extension? It is very useful for debug Javascript on Firefox.
Firebug also include a Javascript console where you can test your functions.

Don't check against null -- try to stick with the undefined that jQuery ensures. Check what elements.val() returns to start (just alert it).
Also, you don't preventDefault() or return false in the else clause which could be a reason for Firefox to submit the page.

Thank you tjko, using alert saved my day. I was just too confused. I have changed the code as below and everything works perfectly:
var elements = $("li.selected");
elements.each(function() {
$('#<%=CatChecked.ClientID%>').val($('#<%=CatChecked.ClientID%>').val() + "," + $(this).attr("id"));
});
if ($('#<%=CatChecked.ClientID%>').val() == "") {
alert("You must select at least one category");
return false;
}
else {
//alert($('#<%=CatChecked.ClientID%>').val());
return true;
}

java script is not working in mozila

I have added some javascript in html page for input validation.same page is working correct in IE and chrome but in mozila its not working.The problem is when user inputs invalid data its supposed to show alert msg box and when user clicks OK it should return false to form...BUT mozila is not waiting for alert box it just shows alert box for 5-6 sec and then goes to next page defined in form action="nextpage.php"
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(oldpassword, "<b>Error: </b>Please enter the Old Password!") == false)
{ changeColor("oldpassword"); return false; }
else if (valid_length(newpassword, "<b>Error: </b>Please enter the New Password!!") == false)
{newpassword.value=""; changeColor("newpassword"); return false; }
else if (valid_length(cnfpassword, "<b>Error: </b>Please enter the Confirm Password!!") == false)
{cnfpassword.value=""; changeColor("cnfpassword"); return false; }
else if (document.getElementById('newpassword').value != document.getElementById('cnfpassword').value)
{changeColor("newpassword");cool.error("<b>Error: </b>Passwords entered are not same!");
newpassword.value="";cnfpassword.value="";return false;}
}
}function validate_required(field, alerttxt)
{
with (field)
{
if (value == null || value == "")
{
cool.error(alerttxt);return false;
}
else
{
return true;
}
}
}
cool.error is nothing but CSS nd Js for alert box.I thing there is not any problem in my code weather problem is in some browser settings.Is it so??? because it is working fine in IE and Chrome.

You're using a non-standard IE-only behavior that creates global variables for every element with an ID.
To fix it, add a global variable for each element that you use:
var oldpassword = document.getElementById("oldpassword");
Also, you should never use Javascript's with block.
It is very different from VB's with block, and should not be used unless you truly understand its pitfalls and shortcomings. It will also slow down your code.

You could also use some javascript library to get past browser issues. I'm rooting for jQuery.