Hello friends, today we will be going to how do we Disable Copy Text On Website Using Html, CSS and JavaScript. I have posted many videos and articles before related to the JavaScript project, now this the something new that we are going to build.
Video Tutorial of Disable Copy Text On Website Using Html, CSS and JavaScript
As you have seen on the given video tutorial of Disable Copy Text On Website Using Html, CSS and JavaScript,
If you are feeling bored watching the given video tutorial of Disable Copy Text On Website Using Html, CSS and JavaScript then you can copy or download the given codes below:
Disable Copy Text On Website Using Html, CSS and JavaScript | Free Source Code
To create this program (Disable Copy Text On Website). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and glue the given codes in your HTML record. Keep in mind, you've to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Disable copy text on website</title>
</head>
<body>
<div class="copy-overlay"></div>
<div class="protect_alert">
<span>Don't copy text!</span>
</div>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus delectus corrupti tenetur laboriosam doloremque nam iure optio voluptates nulla obcaecati hic quod nobis, alias illum maiores perferendis, recusandae libero sunt. Nostrum in earum magni incidunt doloremque magnam voluptatibus, fugit, quia et ipsa doloribus. Repudiandae, itaque similique soluta vero numquam vitae animi quam nihil ullam dolorem non libero quas. Enim debitis dicta, ipsum nobis dolores autem eos corrupti, cupiditate neque veniam culpa laudantium sit eveniet ad sint inventore voluptatem omnis quos nesciunt nisi, ipsa ab doloremque. Quaerat corrupti distinctio laudantium vero quas rerum cum dolores aperiam accusantium doloribus aliquam fugit magni quasi amet accusamus, dignissimos dolorem illo unde esse dolor explicabo ducimus. Eveniet veniam enim expedita a earum, quidem blanditiis ullam autem, saepe quae ipsa neque consequuntur tenetur, hic doloremque debitis harum iusto odit cumque. Officia, aliquam. Reiciendis dolore, est nisi veritatis officia, maiores exercitationem maxime eligendi illum asperiores a! Similique doloribus architecto nulla libero perferendis aliquid saepe ex quibusdam perspiciatis assumenda, rerum, at quae, iusto laborum ipsa. Cumque commodi nostrum quidem reiciendis recusandae architecto autem in voluptatem? Ullam perspiciatis quos dolorem, pariatur quia a ducimus earum modi non esse nisi nostrum alias odit repellat. Earum enim voluptas, quidem mollitia, beatae nulla dolores ullam blanditiis non tenetur quae voluptatem quis, at quia officiis iste sit neque quaerat. Molestias ipsa unde perspiciatis asperiores quaerat. Veritatis voluptatibus aspernatur consequuntur quisquam odio placeat perferendis amet cupiditate, labore, nemo eaque? Nesciunt facere blanditiis, at beatae reiciendis obcaecati? Molestiae velit incidunt, iste obcaecati asperiores repudiandae. Et cum eius labore ducimus non accusamus commodi, quibusdam eos quod omnis accusantium ex aperiam inventore neque iste earum impedit, molestiae ipsa deserunt hic iure libero dolores cumque. Accusamus, sapiente. Ab beatae obcaecati ducimus perspiciatis illo nesciunt sunt ea accusamus nisi eos ipsum molestias hic repellendus, quam veritatis, quia quaerat nihil incidunt praesentium ratione enim quibusdam vitae assumenda! Temporibus, inventore sunt vero rerum, sint, aliquid debitis incidunt veritatis odio facilis et voluptate ex ut asperiores alias tempore quam consequuntur sed. Explicabo nobis ab, ipsa beatae labore reprehenderit neque iste laboriosam est obcaecati aliquam atque rerum sunt tempore delectus cupiditate hic cum quam. Molestiae laboriosam exercitationem cum hic dolores! Culpa dolorem corrupti sed. Ipsam laboriosam error beatae accusamus quis pariatur temporibus voluptatem saepe, quisquam sapiente ad veniam aliquam repellendus laborum nam alias rerum cum accusantium veritatis? Sed aut magni itaque inventore esse suscipit architecto quisquam error debitis quod dicta, modi, repellat cum aperiam, eveniet eius alias natus quidem ratione necessitatibus. Excepturi in libero voluptate consequatur nihil quia nulla, recusandae maxime dolore illum minus! Consectetur sit ipsum voluptatibus exercitationem. Ipsam, pariatur aspernatur mollitia consequuntur quibusdam libero sequi animi qui dolores. Natus nisi mollitia nesciunt quos fugiat facere nam! Magni sed, sit et perferendis quidem, sint fugit rem omnis velit harum ab quaerat. Numquam accusamus earum recusandae harum commodi! Doloribus reiciendis maiores veritatis sint modi libero. Adipisci aut sed minus molestias cumque at, quae, quia est consequuntur, omnis voluptatem? Nam eveniet doloribus neque. Eveniet autem eligendi veniam a officiis ipsam aliquam voluptates inventore mollitia!</p>
</section>
<script>
const copyOverlay = document.querySelector('.copy-overlay')
const protectAlert = document.querySelector('.protect_alert')
window.addEventListener('copy',(e)=>{
e.preventDefault();
copyOverlay.style.display = "block";
protectAlert.style.display = "block";
})
copyOverlay.addEventListener('click',()=>{
copyOverlay.style.display = "none";
protectAlert.style.display = "none";
})
</script>
</body>
</html>
Second, make a CSS record with the name of style.css and glue the given codes in your CSS document. Keep in mind, you've to make a record with .css extension.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
padding: 80px 9%;
background: #ccc;
}
section
{
padding: 50px;
background: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
section p
{
line-height: 1.5;
font-size: 1.2em;
color: #222;
}
.copy-overlay
{
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.747);
position: fixed;
z-index: 1500;
display: none;
}
.protect_alert
{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
width: 300px;
height: 100px;
z-index: 2000;
margin: auto;
border-radius: 10px;
padding: 0px 10px 0px 10px;
display: none;
}
.protect_alert span
{
font-size: 14px;
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
}That’s all, now you’ve successfully created a program to Disable Copy Text On Website Using Html, CSS and JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Click on the following download button to download all source code files.
Post a Comment
How can I help you