Disabling the ability for users to copy text from a website can be done using a combination of HTML, CSS, and JavaScript.
To begin, you will need to use the oncopy event attribute in the HTML body element to call a JavaScript function when a user attempts to copy text. In this function, you can use the preventDefault() method to cancel the default copy action.
Next, you can use CSS to visually indicate to users that they cannot copy text from the website. This can be done by using the user-select: none property to prevent users from highlighting text. You can also use the cursor: not-allowed property to change the mouse cursor to a “no” symbol when hovering over text that cannot be copied.
Finally, you can use JavaScript to display a message or alert to users when they attempt to copy text. This can be done using the alert() function or by creating a custom message using the innerHTML property of a HTML element.
Overall, disabling the ability to copy text from a website can be a useful way to protect content and prevent unauthorized reproduction. However, it is important to consider the user experience and the potential impact on accessibility when implementing this functionality.
Video Tutorial Of Disable Copy Text On Website Using HTML, CSS & 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 paste 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;
}
Congratulations! You have successfully created a program for disabling the ability to copy text on a website using HTML, CSS, and JavaScript. If you encountered any issues or errors during the process, you can download the source code files by clicking on the provided download button. The files are available for free and will be downloaded as a .zip file. Extract the file to access the source code files.
By learning how to disable the copy text function, you have gained valuable skills that can help you create secure and protected websites. You can also use these skills to build other types of interactive elements or to customize the behavior of your website. Thank you for following along with this tutorial. I hope you enjoyed it and found it helpful. Don’t hesitate to reach out if you have any questions or need further assistance.
