How to prevent pasting into input fields

Claire Parker-Jones on January 30, 2019

Edit 01/02/19: I was frustrated by yet another web form that wouldn’t let me paste my password into the Confirm Password field, wondered how it was... [Read Full]
markdown guide
 

Nice write up on how to! thanks.

As to the why/why-not, let me take a moment and opine on that...

Please, please just don't do this at all, blocking the UX of a browser because you, or more likely your project manager, wants to be clever and pander the the lowest demonimator doesn't mean you need to. all it does is get in the way of what you want the user to do, and that's give you information. I shouldn't need to confirm my email, any more than i should have to confirm my middle name twice.

 

In addition, I use a password manager to store my credentials and I usually copy most of the data, so it actually makes it more prone to errors in this case. There's no way I'm going to make a mistake if I copy it. Same goes for Credit Card number or account number, so many of them you can't paste into...

 

I also agree with this, most notably around password managers. If a user is trying to practice good password behaviours but it thwarted by a lack of pasting into a field, then it is likely to get them to choose to use an easier to remember password (probably something they've used before) and makes their account vulnerable to take over.

As developers it is our jobs to help our users be secure, not make it harder for them.

 

Came here to say just that.
If you use a password manager, chances are you don't even know your passwords, so how are you supposed to type them twice? For many websites I am subscribed to I literally never typed my password once, not even in the moment of choosing it.

This is true for most sensitive data, the best option is to have it pre-filled for you via an extension or at least copy paste from another app.

To give a real world example of why disallowing copy paste is inconvenient for the user, just imagine you are on mobile and trying to fill in a form that prevents pasting. You'd have to either split the screen (browser and password manager app) which is always fiddly, or just flip back and forth and copy a password that is probably (and hopefully) not very readable, or manually write it down on a piece of paper and then input it in the form...

How many people would willingly go through this?

 
 

Should you disable the paste function?

Opinion alert: There is a special place in hell for websites that prevent paste.

There's nothing worse then having to manually type a 32 char mixed case password.

 

Thank you for all your effort put into this!

But please stop propagating this bad practice.

I have passwords with at least 64 characters and I am not going to enter them on a site whatsoever. If your site forces this ill type behaviour you lost me as a customer.

This is not meant on a personal level. This practice leads to awful security practices.

 

Claire, thank you for the article and for the clear explanation of how this works. That technical rundown is the basis of your article, not the separate question of whether this is a good practice or optimal UX. You in fact raise the question of whether people should do this directly in the post.

The growing consensus in the comments is that it's not a generally-desired behavior, but that doesn't detract from your worthwhile explanation and write-up. Thanks for sharing with the community!

 

Thanks for the article. It's good to know how stuff works. Like everyone else I wish to clarify that the following comments are about the behavior, not the very nice article.

If it was possible to force users to type numbers into a box using the row of keys at the top instead of the keypad, would we do that? That's what preventing paste is. It's an attempt to control how users do something even though the end result will be exactly the same.

If something doesn't let me paste I'll open up the dev tools and set the properties directly in the DOM. The same goes for pop-ups that can only be closed by saying, "No, thanks." No, I won't thank you. I'll delete you.

 

"If something doesn't let me paste I'll open up the dev tools and set the properties directly in the DOM."
Never thought about this before! Genius! Thanks for the tip!

 

Great read, but I have to agree with some of the other comments.

I have auto-fill and a password generator, so I rarely need to type an email or password (or credit card, phone number, etc) so it drives me nuts when a service forces me to type something.

Especially when that something is something like Fq7RE4s5Yc@HAdysa2xH

*Edit: dangit, now I have to change my dev.to password ;P

 

How to prevent pasting into input fields

Don't!

 

Thanks for the write up! Think it's great to know how a website might build this feature so maybe we can workaround it with script runner like Greasemonkey. 🙃

 

Here's an even better how-to: Don't.

Preventing users from pasting into a password field is a terrible, terrible design. How is copying & pasting any different from using a password manager's auto-fill feature?

 

Can you add a paragraph in the beginning with "don't do it"?

 

How to fix this "solution"

for (const elm of $$('*')){
  if (elm.onpaste) elm.onpaste = undefined
  const {paste} = getEventListeners(elm)
  if (paste) {
    for (const lis of paste) elm.removeEventListener('paste', lis.listener, lis)
  }
}

I get to use the Chrome-specific $$ because I'm already necessarily using Chrome-specific getEventListeners.

The provided example can be defeated by just this though:

for (const elm of document.querySelectorAll('*')){
  if (elm.onpaste) elm.onpaste = undefined
}
 

Unless you have nothing but contempt for users of password managers, do not do this. Ever. Period.

While I'm at it, don't enforce arbitrary whitelisting/blacklisting of special characters, and if you're going to enforce a max-length make it at least 32 chars.

 

Excellent article, love that you included a section on whether or not one should. I think that's something developers often don't ask ourselves enough.

 

I refuse to use a service the moment it prevents me from pasting input.

 

Thanks! I think this write-up is extremely useful even (especially) for those against paste-blocking; in fact, I just used the information to reverse-engineer a paste block that was really annoying me. (the site was using BOTH a listener and an onpaste attribute, and I only found one of them on my own).
Did I spend much more time doing that than it would have taken to type in the number (twice)? probably.
Was it worth it? definitely.

 

I believe that the intention your having is good!

Users have week passwords and tend to forget them or use the same password again and again. This is not a good thing.

What I don't understand is why is the typo thing such a big concern to you?

I also believe that instead of saying the user what he should not do, we should say what would be a better option.

Something like: Hey your password looks week do you know that password manager could help you here?

or

just generate a very good password for the user and inform him/her why this password is good.

 

Thanks for the write-up, and you do mention it in the end but: don't actually do this. It's a horrible pain if you have your data in a text file and copy from there.

 

It can be useful in online exercises, where typing out the answer is an important part of the exercise.

 

I just had a thought. Would it be possible to whip up a greasemonkey script to disable this feature on all sites? Seems like this should be doable.

 

Thanks for talking through the considerations too! I think its really important to ask yourself if you "should" do something even if you theoretically could.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Blocking cut+paste is a clumsy, ill-conceived thing to do on any input control. Don't do it.
This is a solution to a non-existent problem and sadly just represents undesirable cancer-like behaviours on the web. Browsers/password managers offer to save credentials these days. Even if they are entered erroneously, they're saved. And, there's always "forgot password" if you lock yourself out inadvertently.
All this type of thing does is frustrate competent users.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

There is definitely a definitive answer and that is no.

This'd be a world-class troll article.

code of conduct - report abuse