How to Prevent Pasting into an Input

By  on  

Every once in a while I get to a website that doesn't allow me to paste into a form input. In most cases it's something to do with login credentials (username and or password) and auth codes. So how are they preventing me from pasting information? It's as easy as you'd think!

Let's start with the input element:

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

The onpaste attribute lets us prevent pasting into the form. Adding the autocomplete attribute as well as preventing drag and drop into the element. If you want to avoid the on{event} code in the HTML, you can do it the cleaner way:

myElement.addEventListener('paste', e => e.preventDefault());

Writing this post pains me because I loathe when websites prevent me from pasting text. I'm begging you not to do this. Just don't.

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    39 Shirts &#8211; Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Redacted Font

    Back when I created client websites, one of the many things that frustrated me was the initial design handoff.  It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...

  • By
    Create Classy Inputs Using MooTools&#8217; OverText

    The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort.

Discussion

  1. mwait

    So am I able to edit the locally stored js file to re-enable pasting until I reload the page?

  2. Thanks a lot for sharing this. It was really needed as I don’t like to write passwords and username again and again.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!