HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development Javascript

How To Prevent or Disable Copy and Paste in an Input Field

in Javascript
Reading Time: 2 mins read
385 16
0
How To Prevent or Disable Copy and Paste in an Input Field
551
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

On the following html code, you will see there are 2 input fields. One with a type of email and the other one is password.

https://youtu.be/Qy-Raqs5x6I

RelatedPosts

How To Get the Size of the Screen, Current Web Page and Browser Window

How To Copy Text to Clipboard [CODE]

Vertical Slick Slider with Progress Bar [CODE]

<input type="email" id="email" pattern="[email protected]\.com" required> <br><br>

<input type="password" id="pass" name="password" minlength="6" required >

Disabling Copy and Paste using HTML Attributes

Disable it by adding an onpaste attribute with a value of return false.

“onpaste” is an HTML event attribute that can be added to an element. It triggers a script to run when the element is pasted into, which happens when a user pastes content into it. If the script that runs is “return false;”, then the paste action is blocked, and no content is pasted into the element.

<input type="email" id="email" onpaste="return false;" pattern="[email protected]\.com" required> <br><br>

<input type="password" id="pass" onpaste="return false;" name="password" minlength="6" required >

Now let’s disable any drag-and-drop content on the fields.

Add an ondrop attribute with a value of return false.

The “ondrop” attribute contains a JavaScript statement, “return false;”, that is executed when a drop event occurs on an HTML element. This statement prevents the default action of the drop event from taking place.

<input type="email" id="email" onpaste="return false;" ondrop="return false;" pattern="[email protected]\.com" required> <br><br>

<input type="password" id="pass" onpaste="return false;" ondrop="return false;" name="password" minlength="6" required >

Disabling Copy and Paste using JavaScript

Let’s declare a constant variable called “inputField” and assigns it the value of the element with an ID of “email” from the HTML document.

Next, let’s add an event listener to the “inputField” element for the “paste” event.

The “paste” event occurs when the user pastes content into the element. The function specified by the event listener will be called whenever this event occurs.

The function calls the “preventDefault” method on the event object, which cancels the default action of the “paste” event. This means that if the user tries to paste content into the element, the default action of inserting the pasted content into the element will be prevented.

This code attaches a function to an element with the ID “email” that will be triggered when the user attempts to paste the content into the element. The function cancels the default behavior of inserting the pasted content into the element.

const inputField = document.getElementById('email');
inputField.addEventListener('paste', e => e.preventDefault());

 

Share220Tweet138Share55

Related Posts

Javascript

How To Get the Size of the Screen, Current Web Page and Browser Window

by 22bulbjungle
December 11, 2022
0

Using JavaScript To get the size of the screen, the current web page, and the browser window, you can use the screen,...

Read more
How To Copy Text to Clipboard

How To Copy Text to Clipboard [CODE]

September 6, 2022
Vertical Slick Slider Progress Bar Indicator

Vertical Slick Slider with Progress Bar [CODE]

September 1, 2022
Slick Image with Text Slider

How To Create Custom Image Text Slider Using Slick (Step-by-step)

April 27, 2021
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.