Disable pasting text into HTML form

0 votes
asked Aug 4, 2009 by justinl

Is there a way using JavaScript to disable the ability to paste text into a text field on an HTML form?

E.g. I have a simple registration form where the user is required to input their email twice. The second email entry is to verify there are no typos in the first email entry. However if the user copy/pastes their email then that defeats the purpose and I've been experiencing users having problems because they've input the wrong email and copy/pasted it.

Maybe I wasn't clear on my question but I am not trying to prevent people from copying (or drag selecting) text on their browser. I just want to stop them from pasting input into a text field to minimize user error.

Perhaps instead of using this "hack" you can suggest another solution to the core problem of what I'm trying to solve here? I've done less than half a dozen user tests and this has already happened twice. My audience does not have a high level of computer proficiency.

20 Answers

0 votes
answered Aug 4, 2009 by sheff

You can..... but don't.

You should not be altering the default behaviour of a users browser. It really is bad usability for your web application. Also if a user wants to disable this hack then they can just disable javascript on their browser.

Just add these attributes to the textbox

ondragstart=”return false” onselectstart=”return false”
0 votes
answered Aug 4, 2009 by kevin

You could attach a "keydown" listener to the input box to detect whether or not the Ctrl + V keys are being pressed and, if so, stop the event or set the input box's value to ''.

That wouldn't handle right clicking and pasting or pasting from the Edit menu of the browser, though. You may need to add a "last length" counter to the keydown listener and use an interval to check the field's current length to see if it increase since the last keystroke.

Neither is recommended, though. Form fields with paste disabled are extremely frustrating. I'm capable of typing my email correctly the first time, so I reserve the right to paste it into the second box.

0 votes
answered Aug 4, 2009 by richard-lucas

How about sending a confirmation email to the email address that the user has just entered twice in which there is a link to a confirmation URL on your site, then you know that they have got the message?

Anyone that doesn't click to confirm the receipt of the email may have entered their email address incorrectly.

Not a perfect solution, but just some ideas.

0 votes
answered Aug 4, 2009 by alsciende

Add a second step to your registration process. First page as usual, but on reload, display a second page and ask the email again. If it's that important, the user can handle it.

0 votes
answered Aug 12, 2009 by christopher-parker

I recently had to begrudgingly disable pasting in a form element. To do so, I wrote a cross-browser* implementation of Internet Explorer's (and others') onpaste event handler. My solution had to be independent of any third-party JavaScript libraries.

Here's what I came up with. It doesn't completely disable pasting (the user can paste a single character at a time, for example), but it meets my needs and avoids having to deal with keyCodes, etc.

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

To make use of this in order to disable pasting:

<input type="text" onpaste="return false;" />

* I know oninput isn't part of the W3C DOM spec, but all of the browsers I've tested this code with—Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7—support either oninput or onpaste. Out of all these browsers, only Opera doesn't support onpaste, but it does support oninput.

Note: This won't work on a console or other system that uses an on-screen keyboard (assuming the on-screen keyboard doesn't send keys to the browser when each key is selected). If it's possible your page/app could be used by someone with an on-screen keyboard and Opera (e.g.: Nintendo Wii, some mobile phones), don't use this script unless you've tested to make sure the on-screen keyboard sends keys to the browser after each key selection.

0 votes
answered Aug 12, 2009 by josh-lee

Crazy idea: Require the user to send you an email as part of the signup process. This would obviously be inconvenient when clicking on a mailto link doesn't work (if they're using webmail, for example), but I see it as a way to simultaneously guarantee against typos and confirm the email address.

It would go like this: They fill out most of the form, entering their name, password, and whatnot. When they push submit, they're actually clicking a link to send mail to your server. You've already saved their other information, so the message just includes a token saying which account this is for.

0 votes
answered Aug 17, 2010 by ivan-maeder

I did something similar to this for http://bookmarkchamp.com - there I wanted to detect when a user copied something into an HTML field. The implementation I came up with was to check the field constantly to see if at any time there was suddenly a whole lot of text in there.

In other words: if once milisecond ago there was no text, and now there are more than 5 chars... then the user probably pasted something in the field.

If you want to see this working in Bookmarkchamp (you need to be registered), paste a URL into the URL field (or drag and drop a URL in there).

0 votes
answered Aug 18, 2010 by user275790

what about using CSS on UIWebView? something like

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

also you can read detail about block copy-paste using CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

0 votes
answered Aug 27, 2010 by s-p-arif-sahari-wibo

Simple solution: just reverse the registration process: instead of requiring confirmation at the end of registration process, request confirmation at the beginning of it! I.e. the registration process started with a simple form asking for e-mail address and nothing else. Upon submitting, an e-mail with link to a confirmation page unique to the e-mail address sent out. The user go to that page, then the rest of information for the registration (user name, full name, etc.) will be requested.

This is simple since the website does not even need to store anything before confirmation, the e-mail address can be encrypted with a key and attached as part of the confirmation page address.

0 votes
answered Aug 1, 2011 by vaichidrewar

from

Some may suggest using Javascript to capture the users' actions, like right-clicking the mouse or the Ctrl+C / Ctrl+V key combinations and then stopping the operation. But this is obviously not the best or simplest solution. The solution is integrated in the input field properties itself together with some event capturing using Javascript.

In order to disabled the browsers' autocomplete, simply add the attribute to the input field. It should look something like this:

<input type="text" autocomplete="off">

And if you want to deny Copy and Paste for that field, simply add the Javascript event capturing calls oncopy, onpaste, and oncut and make them return false, like so:

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

The next step is using onselectstart to deny the input field's content selection from the user, but be warned: this only works for Internet Explorer. The rest of the above work great on all the major browsers: Internet Explorer, Mozilla Firefox, Apple Safari (on Windows OS, at least) and Google Chrome.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...