Jquery Archives | Page 2 of 2 | Codeexecute

How to disable cut copy paste on webpage using jQuery

Here is the jQuery code to prevent users to cut copy and paste from our website.

1.  disable cut copy and paste on a specific element like a textbox

Step 1 . First we create a div and assign a unique id to this div .

<div id="targetElement">
this is our div content .
</div>

Step 2  We are using jQuery so we need to call jQuery library before our jquery code. in this tutorial we are using google cdn jquery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

 

Step 3. Now paste this code below your jquery library and this jquery code will prevent cut copy and paste from your specific element.

<script type="text/javascript">
$(document).ready(function(){
$('#targetElement').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

here is the full source code

<div id="textField1">
this is our demo text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#textField1').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

2. Disable cut copy paste on webpage
We can disable cut copy and paste from our complete webpage by using this jQuery code.

$(document).ready(function () {
//Disable cut copy paste
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
});

3. Disable right click on webpage to prevent cut copy and paste.
We can also disable right click on our webpage to prevent cut copy and paste from our webpage.to disable right click on webpage use this jQuery code.

//Disable mouse right click
$("body").on("contextmenu",function(e){
return false;
});

4. Disable cut copy paste using html
Yes, We can also use html and modify body tag to prevent cut copy and paste.

<body oncopy="return false" oncut="return false" onpaste="return false">

To disable mouse right click with html use modify you body tag like this.

<body onContextMenu="return false">

Thank You.

 

Full screen div at any screen and resolution

Add this in your javascript file and call this file after jquery file

function fullsize() 
{
	var new_height = window.innerHeight; // get new height of window
	var fullsize = new_height; 
	fullsize = parseInt(fullsize) + 'px'; // concatenate string get output in px format  
	jQuery("div").css('height',fullsize); // changing height of div
}
jQuery(document).ready(function()
{
	fullsize();
	jQuery(window).bind('resize', fullsize); // event is call at screen change ( resolution changes )
});

Note: you can replace ‘jQuery’ with ‘$’ if there is any issue due to ‘jQuery’ Keyword.

 
 

How to show local json data in chrome using angular JS??

Working with angularJS needs a JSON file to play with data. But the irony of the chrome is behind the fact that the local JSON file data can’t be displayed in simple chrome browser.

Solution of this could be using any deployment server environment on your system like Java or python. But as a front end developer this seems to be quite difficult.So the solution is ,actually there.

Yes the chrome does not display data using local file due to some security reasons but this security can be turned off using simple command prompt.

1. Find the path for chrome.exe file :-

open command prompt
type cd\
type dir chrome.exe /s /p
now with path obtained in this step goto this path
and then execute following command:-

chrome.exe –allow-file-access-from-files

Capture