How to Disable Text Selection using jQuery?
Last Updated :
23 Jul, 2025
In this article, we are going to learn how to disable text Selection using jQuery. Disabling text selection refers to preventing users from highlighting or selecting text content on a webpage. Text selection is a common feature in numerous web applications. However, there might arise situations where the prevention of users from selecting and copying text content on a web page is desired. In such cases, jQuery, an extensively used JavaScript library, provides a convenient solution.
Syntax:
$(document).ready(function() {
// Disable text selection
$("body").css("-webkit-user-select", "none");
$("body").css("-moz-user-select", "none");
$("body").css("-ms-user-select", "none");
$("body").css("user-select", "none");
});There are different approaches to Disable Text Selection Using jQuery. Let's discuss each of them one by one.
- Disable Text Selection for Specific Elements
- Toggle Text Selection On and Off
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Disable Text Selection for Specific Elements
In this approach, jQuery is utilized to implement targeted text selection control. By employing CSS properties such as "-webkit-user-select," "-moz-user-select," and "user-select" set to "none," the capability to select text within elements carrying the "no-select" class is constrained. This effectively ensures that the content contained within those specific elements cannot be highlighted or copied.
Syntax:
$(document).ready(function () {
// Disable text selection for elements
// with class "no-select"
$(".no-select").css({
"-webkit-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none"
});
});Example: In this example, we are using jQuery to disabling text selection by applying CSS rules to elements with class "no-select". The layout features centered content with a white background, green-bordered "no-select" div, and clean design.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Disable Text Selection Using jQuery</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 4rem;
}
.no-select {
border: 3px solid green;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
margin-bottom: 10px;
color: green;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>
Disable Text Selection Using jQuery
</h1>
<div class="no-select">
<h1>
Welcome To Geeksforgeeks
</h1>
</div>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles
</p>
</div>
<script>
$(document).ready(function () {
// Disable text selection for elements
// with class "no-select"
$(".no-select").css({
"-webkit-user-select": "none",
"-moz-user-select": "none",
"-ms-user-select": "none",
"user-select": "none"
});
});
</script>
</body>
</html>
Output:
Approach 2: Toggle Text Selection On and Off
This approach introduces a dynamic feature using jQuery to enable or disable text selection throughout the entire page. The state is toggled by clicking a button. When text selection is allowed, the default behavior remains unchanged. However, when it is disabled, the same CSS properties are applied to the "body" element, preventing text selection across the entire page.
Syntax:
$(document).ready(function () {
let allowTextSelection = true;
$("#toggle-button").click(function () {
allowTextSelection = !allowTextSelection;
if (allowTextSelection) {
$("body").css("user-select", "auto");
} else {
$("body").css("user-select", "none");
}
});
});Example: This example demonstrates a webpage that employs jQuery to enable users to easily switch text selection. The design showcases a centered container with a maximum width of 600px, a heading GeeksforGeeks, Furthermore, the "Toggle Text Selection" button is styled with a dynamic blue background that intensifies on hover.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Toggle Text Selection</title>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
max-width: 600px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-top: 0;
}
p {
line-height: 1.6;
}
#toggle-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
#toggle-button:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome To GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks.
It contains well-written, well-thought,
and well-explained computer science
and programming articles.</p>
<button id="toggle-button">
Toggle Text Selection
</button>
</div>
<script>
$(document).ready(function () {
let allowTextSelection = true;
$("#toggle-button").click(function () {
allowTextSelection = !allowTextSelection;
if (allowTextSelection) {
$("body").css("user-select", "auto");
} else {
$("body").css("user-select", "none");
}
});
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing