WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How To Prevent Pasting Into Input Fields

In this tutorial, we are going to show you how you can prevent users from being able to copy and paste input values into certain fields. This can be especially useful when you have repeating fields for verification. For example, you may want to prevent users from copying the password into the repeat password input field, or you may want to do the same thing if you wish to include a repeat email address field. This is useful as it ensures the password the user is entering is correct, and it also ensures users receive email from your website. Let’s say you input the incorrect email address and then you copy this to the repeat email box, the user could end up not receiving the two-step certification email and in turn, this could lead to customers no longer using your website. You don’t want this to happen so sometimes this can be really effective to have in place.

So, how is this functionality achieved? How can we stop your users from pasting content into an HTML input field?

Well, we can use JavaScript to target an input field’s paste event and change how it works like so:


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

<script>
if ( $('#no-paste').length > 0 ) {  
  const pasteBox = document.getElementById('no-paste');
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
}
</script>

What this code does is 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 the content into the field, using either a keyboard shortcut or context menu, nothing will happen. We also wrapped this with if ( $('#no-paste').length > 0 ) {   }, so that the script will only running on pages where it contains the #no-paste element, otherwise you will get an error.

If you want to check out a working CodePen of this in action, you can do so here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How To Create A Modern Scroll Down Animation Icon With CSS

CSS / 14th March 2025

How To Create A Modern Scroll Down Animation Icon With CSS

Read More Related - How to get the selected file name from an input type file using jQuery

HTML / 1st January 2024

How to get the selected file name from an input type file using jQuery

Read More