Welcome to today’s tutorial. In today’s tutorial, we will learn how you can disable cut, copy and paste on a particular element or on the whole webpage. For this tutorial, we use HTML, CSS and a little bit of javascript.
This one is going to be a really quick tutorial as many things are mostly self-explanatory. So let us begin with the tutorial.
Video Tutorial:
If you like to code along with me. Or if this tutorial is hard to understand you can check out the video version of this tutorial down below. Also, I post a new tutorial on my youtube channel every alternate day. For more such tutorials do subscribe to my youtube channel.
Project Folder Structure:
Let us take a quick look at the project folder structure. The project folder is called – Disable Cut, Copy, Paste. Inside this, we have two files. The first is the HTML document – index.html. The second is the stylesheet – style.css.
HTML:
We start with the HTML section. Copy the code below and paste it into your HTML document.
The HTML section consists of a p tag with some random demo text. We add some events like oncopy, oncut, onpaste, ondragstart and ondrop. We set the return value of this to false, thus disabling the events. This way we ensure there is no way for the user to copy, cut or paste any text from our p tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Disable Cut, Copy, Paste</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p
oncopy="return false"
oncut="return false"
onpaste="return false"
ondragstart="return false"
ondrop="return false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto numquam
placeat natus optio quod obcaecati esse recusandae et minima deserunt,
reprehenderit fugiat molestiae. Beatae, ratione provident illo,
voluptatibus quisquam nam laboriosam eveniet repudiandae vero minus
exercitationem? Enim expedita culpa quod quasi tenetur voluptas
perferendis numquam repellendus libero doloribus tempore molestias sint ab
iste assumenda fugiat ullam, possimus doloremque sequi incidunt?
</p>
</body>
</html>
CSS:
Next, we style the webpage a little bit. Copy the code provided below and paste it into your stylesheet.
The code is just some basic styling of p tag. You can totally skip the CSS code. And that’s it. You have successfully disabled cut, copy and paste on your HTML element.
body {
padding: 0;
margin: 0;
height: 100vh;
display: grid;
place-items: center;
}
p {
font-size: 20px;
padding: 20px;
}
If you have any issues while coding, you can download the source code provided below by clicking on the download code button. I would love to hear your suggestions and feedbacks. So please do comment on them below. Happy Coding!
bro i don’t find Disable Right Click code here.