Disable pasting text into HTML form

Question

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.

Answer 1

if you have to use 2 email fields and are concerned about the user incorrectly pasting the same mistyped email from field 1 to field 2 then i'd say show an alert (or something more subtle) if the user pastes something into the second email field

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

this way you don't disable paste, you just give them a friendly reminder to check what they've presumably typed in the first field and then pasted to the second field is correct.

however, perhaps a single email field with autocomplete on is all that's needed. chances are they've filled their email in correctly before on another site at some point and the browser will suggest to fill the field with that email

<input type="email" name="email" required autocomplete="email">

Answer 2

Check validity of the MX record of the host of the given email. This can eliminate errors to the right of the @ sign.

You could do this with an AJAX call before submit and/or server side after the form is submitted.

Answer 3

Using jquery, you can avoid copy paste and cut using this

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Answer 4

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.

Answer 5

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.

Answer 6

With Jquery you can do this with one simple codeline.

HTML:

<input id="email" name="email">

Code:

$(email).on('paste', false);

JSfiddle: https://jsfiddle.net/ZjR9P/2/