Disable pasting text into HTML form

Viewed 259122

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.

25 Answers

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”

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.

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.

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.

Functional approach with VanillaJS

function pasteNotAllowFunc(xid){
 let myInput = document.getElementById(xid);
     myInput.onpaste = (e) => e.preventDefault();
}

function copyNotAllowFunc(xid){
 let myInput = document.getElementById(xid);
     myInput.oncopy = (e) => e.preventDefault();
}


copyNotAllowFunc('copyInput')

pasteNotAllowFunc('pasteInput')
Copy
<input id="copyInput" value="copy not allow" />
<hr/>
Paste
<input id="pasteInput" value="paste not allow"/>
<hr/>
Textarea
<textarea id="test" value="Paste here"></textarea>

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.

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/

You can disable the copy paste option with jQuery by the below script:

jQuery("input").attr("onpaste","return false;");

of by using the bellow oppaste attribute into the input fields.

onpaste="return false;"

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).

if you are using angular

<input type="number" (keydown)="refuseInvalid($event) (input)="refuseInvalid($event)" (paste)="refuseInvalid($event)">           </input>

then in your javascript or typescript

refuseInvalid(event) {
    if (event.type == 'input' || event.type == 'paste') {
      event.preventDefault()
      return false;
    }
    if (["-", "+", "e", "."].includes(event.key)) {
      event.preventDefault();
      return false
    }
  }

Please note the use of ".". It will disallow decimal point numbers too.

Related