Friday 18 June 2010

Preventing Users From Copying Text From and Pasting It Into TextBoxes

Copy, Cut, and Paste Events in JavaScript
Much like ASP.NET, JavaScript code is typically event-driven, meaning that certain blocks of JavaScript execute in response to particular events. For example, you can run a block of script when the web page loads, when a form is submitted, or when an HTML element is clicked. If you are not familiar with JavaScript's event model, check out Introduction to Events, which gives a great overview of how event handling works in JavaScript.

JavaScript includes events that fire when the user attempts to copy, cut, or paste from within the browser window: copy, cut, and paste. What's more, by creating an event handler for these events you can write script that cancels the default behavior, meaning that with just a few lines of JavaScript you can "turn off" copying, cutting, and/or pasting behavior from within the browser. The copy, cut, and paste events are supported in most modern browsers, including Internet Explorer
5.5 and up, Firefox 3.0 and up, Safari 3.0 and up, and Chrome, although the support differs a bit between the various browsers. For instance, Firefox, Safari, and Chrome will fire the copy, cut, and paste events if the user copies, cuts, or pastes, anywhere in the document, but Internet Explorer only fires these events if the copy, paste, and cut occurs within a form, on an HTML element, within a text input, or on an image. (For more information on the browser compatibility for these events, refer to the cut, copy, paste Event Compatibility Matrix.)

Remarks:
1. You cannot truly prevent someone from copying, cutting, or pasting. The techniques we'll examine in this article show how to use JavaScript to put up a roadblock to copying, cutting, and pasting. However, a determined user could disable JavaScript in their browser, at which point the JavaScript you've written to prevent copying, cutting, and pasting is moot.
2. Preventing copying, cutting, and pasting can lead to a jarring and frustrating user experience. No matter what car you get into, when you turn the key you expect the to start. Imagine how frustrated you would become if you rented a car, hopped in, turned the key, and nothing happened. The same sentiment exists for computer user interfaces. Users expect certain functionality to be available when they sit down at a keyboard. They expect Ctrl+C to copy the selected contents to the clipboard, and Ctrl+V to paste. Disabling these comfortable and well-known idioms can unnerve users.

For these reasons, I would only recommend disabling copy and paste operations in specific circumstances where the benefits outweigh the negatives. Furthermore, I'd suggest giving users some sort of obvious and visual feedback when they attempt to copy or paste so that they understand these operations have been disabled and that it's not some software bug or hardware failure at play.

Using jQuery to Disable Copy and Paste

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

<script type="text/javascript">
$(document).ready(function () {
$('#id_of_textbox').bind('paste', function (e) {
e.preventDefault();
alert("You cannot paste text into this textbox!");
});
});
</script>

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


$('#<%=txtConfirmEmail.ClientID%>').bind('paste', function (e) {
e.preventDefault();
});
});
</script>

When a user attempts to copy or paste, "message" <div>'s text is set to an appropriate message, it is positioned to the right of the textbox, and is faded in over the course of three seconds, after which it fades out over the course of 1.5 seconds.

<script type="text/javascript">
$(document).ready(function () {
$('#<%=txtEmail.ClientID%>').bind('copy', function (e) {
e.preventDefault();

$('#message').text("You cannot copy the text from this textbox...")
.css(
{
left: 20 + $(this).offset().left + $(this).width() + 'px',
top: $(this).offset().top + 'px'
})
.fadeIn(3000, function () { $(this).fadeOut(1500) });
});
});
</script>

http://www.4guysfromrolla.com/articles/060910-1.aspx

No comments:

Post a Comment