Have you ever tried to choose and copy text from a webpage but it wouldn't go to the clipboard or copy with the right click? Most organizations choose to limit user access to certain web pages on their site; their privacy policies, disclaimer, and terms of use pages are made "read only."
Over time, most web developers use various techniques to mask their content preventing users from copy-pasting, but in 2022, HTML attribute inert was introduced to assist web developers disable copy-paste functionality and user events on web pages or certain elements on the web page. All that is required is the addition of the attribute inert to an HTML element that contains the material. It is compatible will all browsers except Firefox.
<body>
<section>
<!-- Insert inert as an attribute to parent div or p themselves -->
<div inert>
<h3> Inert HTML attribute is here</h3>
<p>
I am not available for copy-paste; i am only meant to be read by you.
</p>
<p>
<p>
I am not available for copy-paste; i am only meant to be read by you.
</p>
</p>
</div>
</section>
</body>
Read more about inert here on MDN
Let's examine various strategies that developers used to prevent content copy-paste before inert arrived.
1. Using a transparent div over content.
This is done by absolutely position a transparent div over you content. This prevent users from selecting the content.
<div class="content">
<div class="cover"></div>
<h3> Content is covered</h3>
<p>
I am not available for copy-paste; i am only meant to be read by you.
</p>
<p>
<p>
I am not available for copy-paste; i am only meant to be read by you.
</p>
</p>
</div>
Then add the following css styles
.content{
position:relative;
padding:1rem;
}
.cover{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:transparent;
z-index:100;
}
2. Using CSS pseudo elements to generate content.
CSS pseudo elements allow us to select alter elements or content that are not directly related to the HTML. ::before and ::after pseudo element are used to add generated content to HTML; the content is only visible,cannot be copied.
<div class="content"></div>
Then add the following styles
.content::before{
content: "Privacy policies hereein attached";
}
.content::after{
content: "These are terms and conditions here in attached";
}
3. Using JavaScript to disable content menu
Context menu is menu that appears whenever a user clicks right click option. Disabling it is done by add a contextmenu event to the element holding the content then disabling it when the event is fired; calling e.preventDefault() on it.
const content=document.querySelector(".content");
if(content){
content.addEventListener("contextmenu",(e)=>e.preventDefault())
}
4. Using css property user-select
CSS has a property called user-select which disables user selection of content from an HTML element.It can take one of the following 5 values: none,text,all,auto,contain.
Setting the value of none disables text selection from an HTML element or entire web page.
// disables selection of text from a web page
body{user-select:none;}
Top comments (0)