Prevent Copy Paste on Website with Simple JavaScript Code

Nowadays, protection of website content is highly important, as copying and re-publishing materials has become so easy. You can disable copy paste on website with JavaScript to protect your hard work from being used without your approval. Be it a blog, portfolio site, or even an eCommerce site, not letting others copy your content preserves its originality and saves your SEO rankings.

Why Preventing Copy-Paste is Required

Protect original content: Prevent others from copying and reusing your text or design without permission. Duplicate content on other sites can harm your website’s SEO value.
Improve data security: Ensure the users cannot paste possibly malicious code or data into input fields.
Improve professionalism: Websites that block copy-paste actions show a strong commitment to originality.
Control user interaction: You can help users interact with your work how you want them to-for example, by reading it, not copying it.

Bloggers and online educators commonly use these techniques to prevent plagiarism and unauthorized sharing of their course materials.

Disable Paste in Website Using JavaScript

You can easily prevent users from pasting text into input fields or text areas. It’s useful in login or registration forms where you want users to type their details manually for better accuracy and security reasons.

<input type="text" id="username" placeholder="Enter Username">
<script>
document.getElementById("username").onpaste = function(e) {
    e.preventDefault();
    alert("Pasting is disabled on this field.");
}
</script>

As per this example, whenever user tries to paste text on specific input it will not add that as value and show error message to the user.

Disable Copy Action on Website Using JavaScript

To completely block users from copying text from your website, you can disable the copy event across your web pages.

<script>
document.addEventListener("copy", function(e) {
    e.preventDefault();
    alert("Copying content is disabled on this website.");
});
</script>

You can also combine this with disabling right-click to make your site even more secure:

<script>
document.addEventListener("contextmenu", function(e) {
    e.preventDefault();
    alert("Right-click is disabled to protect website content.");
});
</script>

It helps stop unwanted copying and makes it harder for users to duplicate your website’s material.

JavaScript code to Block Copy Paste Content

Let’s create final script which you can add into master file for importing into all web pages. In this case, we also cover short cut blocking for copy and paste.

<script>
document.addEventListener("copy", function(e) {
    e.preventDefault();
    alert("Copying content is disabled on this website.");
});

document.addEventListener("paste", function(e) {
    e.preventDefault();
    alert("Pasting is disabled on this website.");
});

document.addEventListener("cut", function(e) {
    e.preventDefault();
    alert("Cut action is disabled on this website.");
});

document.addEventListener("contextmenu", function(e) {
    e.preventDefault();
    alert("Right-click is disabled to protect website content.");
});

document.addEventListener("keydown", function(e) {
    if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'v' || e.key === 'x' || e.key === 'u' || e.key === 's' || e.key === 'a')) {
        e.preventDefault();
        alert("Keyboard shortcuts are disabled on this website.");
    }
});
</script>

Conclusion

Disabling the copy-paste functionality of a website using JavaScript is one way to protect your valuable content. While this cannot entirely stop determined users from copying, it does provide a pretty strong barrier against casual copying. Combine these few simple lines of JavaScript code to enhance your website’s security features and maintain the uniqueness of your website content with ease.

Codewolfy