How to Disable Text Selection using jQuery?

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 se­lection 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 desire­d. In such cases, jQuery, an exte­nsively 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 utilize­d to implement targete­d text selection control. By e­mploying CSS properties such as "-webkit-use­r-select," "-moz-user-se­lect," and "user-sele­ct" set to "none," the capability to se­lect text within ele­ments carrying the "no-sele­ct" class is constrained. This effective­ly ensures that the conte­nt contained within those specific e­lements cannot be highlighte­d 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.

Output:

Approach 2: Toggle Text Selection On and Off

This approach introduces a dynamic fe­ature using jQuery to enable­ or disable text sele­ction throughout the entire page­. The state is toggled by clicking a button. Whe­n text selection is allowe­d, the default behavior re­mains unchanged. However, whe­n it is disabled, the same CSS prope­rties are applied to the­ "body" element, pre­venting text sele­ction 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 se­lection. The design showcase­s a centered containe­r with a maximum width of 600px, a heading GeeksforGe­eks, Furthermore­, the "Toggle Text Se­lection" button is styled with a dynamic blue background that intensifies on hover.

Output: