In some forms, the “Confirm email address” or “Confirm password” fields don’t allow users to paste text into them. The idea is to make users type their email or password twice to help catch any typos they might have made in those important “Email” and “Password” values.

How is this functionality achieved? How can you stop your users from pasting content into an HTML input field?

We can use JavaScript to target an input field’s paste event and change how it works:

<input type="text" id="no-paste" />

<script>
  const pasteBox = document.getElementById("no-paste");
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
</script>

This code cancels the default behaviour of the paste event (i.e. pasting the contents of the clipboard into the input element). When the user tries to paste content into the field, using either a keyboard shortcut or context menu, nothing will happen.

Try it out in the CodePen example below:

See the Pen Preventing pasting into an input field by Claire (@claireparker) on CodePen.

There are also events for the cut and copy action.

There is good support for the paste event in modern browsers. These events are part of the Clipboard API. The Clipboard API also includes accessing the contents of the clipboard, which has varying levels of support. See the caniuse table for the Clipboard API for more information.

Should you disable the paste function?

Now you know how to change the expected behaviour of the paste event in your webpage, the question is whether you should. The answers to this StackOverflow question about the paste event discourage developers from tampering with default browser behaviour. The posters argue against changing expected browser behaviour because it will confuse users. Additionally, if the user decides to copy and paste data into a form field at the risk of it containing typos, then we should allow them to do this.

Each website is different, so there is no definitive answer. It’s a good idea to consider questions like this when building your site in order to provide the best experience for your users.