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

Incredible Demos

  • By
    CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

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!