How to Disable Text Selection in HTML CSS and JavaScript
By Saruque Ahamed MollickIn this tutorial, we will learn how to disable text selection in HTML CSS and JavaScript.
The tutorial is focused on how to disable text selection of a webpage. Here I will achieve our goal with three different techniques.
- Using Custom CSS
- JavaScript inline Code
- Using JavaScript function
You may also learn,
- Disable HTML button after clicking on it in JavaScript
- Disable right click, copy, cut on a webpage using jQuery
How to Disable Text Selection of a Webpage
Here we are going to explain three techniques one by one with easy examples.
All the techniques are provided below. Choose the best one for you.
Using Custom CSS
The first method I am going to show you easy much easier and simple. You just need to add CSS to the element you want to make selection disabled.
<!DOCTYPE html>
<html>
<head>
<title>Your Title Goes Here</title>
<style type="text/css">
#disabled{
-webkit-user-select: none;
-moz-user-select: none; // this is for mozila firefox
-khtml-user-select: none;
-webkit-touch-callout: none; // this is for iOS safari
-ms-user-select: none;
user-select: none; // not defined but this works on chrome and some other browsers
}
</style>
</head>
<body>
<p>Hello you can select this text as you can do normally</p>
<p id="disabled">Hello don't dare to select me</p>
</body>
</html>Here I have created two paragraphs.
You may also read,
How to disable your website accessing from iframe using JavaScript?
Disable HTML Input Field And Make It Un-clickable
<p>Hello you can select this text as you can do normally</p> <p id="disabled">Hello don't dare to select me</p>
One of those paragraphs is assigned with id disabled.
Now we have added some CSS styling to make it disabled for text selection.
<style type="text/css">
#disabled{
-webkit-user-select: none;
-moz-user-select: none; // this is for mozila firefox
-khtml-user-select: none;
-webkit-touch-callout: none; // this is for iOS safari
-ms-user-select: none;
user-select: none; // not defined but this works on chrome and some other browsers
}
</style>Disable Text Selection Using inline JavaScript
I personally love this technique as it is very easy and shortest way to achieve our goal.
<p onselectstart="return false">Hello you can not select me</p>
I guess it’s pretty cool.
To know more about onselectstart see the reference: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselectstart
Disable Text selection of a webpage using JavaScript Function
function dontSelect(event) {
event.preventDefault();
}
function dragInit(event) {
window.addEventListener('mouseup', dragEnding);
window.addEventListener('selectstart', dontSelect);
// your code goes here
}
function dragEnding() {
window.removeEventListener('mouseup', dragEnding);
window.removeEventListener('selectstart', dontSelect);
// your code goes here
}If you are extreme beginner then this might be slightly harder technique for you as if you are not familiar with event handler in JavaScript.
Leave a Reply