Here are some ways to disable copy, cut, and paste into a HTML text field. But before you implement this in any of your web application or project, you should remember that it’s not a good idea to alter the default behavior of a user’s browser. They may get annoyed and leave immediately from your site. This is one of those features that shouldn’t be used unless absolutely necessary.
When a user attempts to copy, cut, or paste from within the browser window certain JavaScript events fire. By creating an event handler for these events you can write script that cancels the default behavior. That means, with just a few lines of JavaScript you can “turn off” copying, cutting, and/or pasting behavior from within the browser.
The first method I have here is pretty straight forward. By adding the below attributes into a textbox’s <input> tag, you can disable cut, copy, paste, text drag-and-drop, text selections, and the auto complete feature. With these attributes set, the user is left only with the option to manually type in the field.
onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off
Example:
<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>
In the second method we will use a jQuery function. The above method doesn’t disable the right-click (context menu) feature on a text field, but this does that and also alerts the user with a pop up message.
$(document).ready(function() {
$('#textbox_id').bind("cut copy paste", function(e) {
e.preventDefault();
alert("You cannot paste into this text field.");
$('#textbox_id').bind("contextmenu", function(e) {
e.preventDefault();
});
});
});
Before trying out the example, make sure you have the jQuery library included in your page. This is done by adding a <script> element to the <head> section that references the jQuery script file.
Example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Once the jQuery library has been referenced, add the following block of code to the <head> portion of your page:
<script type="text/javascript">
$(document).ready(function() {
$('#text1').bind("cut copy paste", function(e) {
e.preventDefault();
alert("You cannot paste text into this textbox!");
$('#text1').bind("contextmenu", function(e) {
e.preventDefault();
});
});
});
</script>
You can remove the alert line, if you don’t want a pop up alert. In the script, you need to specify the target text field’s id.
<input type="text" id="text1">
With the script in place as it is, users won’t be able to cut, copy or paste into the text field with keyboard nor mouse, and they would also get an alert message.
And finally, if you would like to disable the features on all the text fields on a page or form, you can use this function:
$(document).ready(function () {
$('input[type=text]').bind('copy paste', function (e) {
e.preventDefault();
});
});
The function targets all text input fields. No need of specifying a field id here.
All these methods will work nicely as long as the user has JavaScript enabled on their browser.