Disabling text selection on a web page can be useful in certain scenarios, such as preventing users from copying content or protecting sensitive information. While completely preventing text selection may not always be desirable from a usability standpoint, there are situations where it can be necessary. In this blog post, we’ll explore how to disable text selection on a web page using CSS and JavaScript.
Why Disable Text Selection?
Before we delve into the technical details, let’s briefly discuss why one might want to disable text selection on a web page:
- Protecting Content: Preventing users from selecting and copying content can help protect intellectual property or sensitive information.
- User Experience: In some cases, preventing text selection can improve the user experience by guiding users to interact with content in specific ways, such as through buttons or interactive elements.
- Presentation: For certain design aesthetics or interactive elements, disabling text selection can ensure that the layout remains intact and prevents unintended selection of text.
Html Structure:-
<!DOCTYPE html>
<html>
<head>
<title>Disable selection of text on web page - Wizbrand</title>
<style type="text/css">
body{
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
</style>
</head>
<body>
<h3>How to disable text selection on html web page using JQuery?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>Disabling Text Selection with CSS
<style type="text/css">
body{
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
</style>Output:-
Hopefully, It will help you ..!!!