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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

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!