Disable Text Selection Using CSS or JavaScript
You can disable the text selection of a complete web page or a part of the page using CSS, JavaScript, or jQuery.
How to Disable Text Selection of the Complete Web Page Using JavaScript
Use onmousedown and onselectstart event attributes with the body tag to disable the text selection of a complete web page. These events override the default behavior of the browsers.
How to Disable Text Selection of a Part of the Web Page Using JavaScript
Use onmousedown and onselectstart event attributes with the HTML tag on those you want to disable text selection on. In the below example, text selection is disabled for the 2nd div tag.
How to Disable Text Selection of the Complete Web Page Using CSS
Use the user-select CSS property with the body tag to disable text selection of a complete web page. For some browsers, you need to add an extension before user-select. Here’s the complete list of properties for all the browsers:
Chrome, Opera: user-select Safari: -webkit-user-select Mozilla: -moz-user-select IE 10+: -ms-user-select
You need to set all these properties to none to disable text selection.
How to Disable Text Selection of a Part of the Web Page Using CSS
Use user-select CSS property with the HTML tag on those you want to disable the text selection of. You can target those HTML elements using a class or ID. In the below example, text selection is disabled for the 2nd div tag. Here, class is used to target the 2nd div.
How to Disable Cut, Copy, and Paste Using JavaScript
You can disable cut, copy, and paste using the oncut, oncopy, and onpaste event attributes with the target HTML elements. If you want to disable cut, copy, and paste for the complete web page, you need to use these event attributes with the body tag. You can also disable drag and drop using ondrag and ondrop event attributes. In the below example, cut, copy, paste, drag, and drop are disabled for the input tag.
How to Disable Cut, Copy, and Paste Using jQuery
You can disable cut, copy, and paste on a web page using the jQuery bind() function. In the bind() function, you have to specify the cut, copy, and paste events that are fired when a user tries to cut, copy, or paste anything on the web page. Make sure to embed the script tag in the head section to load jQuery before using it.
How to Disable Right Click on a Web Page Using JavaScript
You can disable right-click on your web page by using an oncontextmenu event and including “return false” in the event handler.
How to Disable Right Click on a Web Page Using jQuery
You can disable right-click on your web page using the contextmenu event.
Protect Your Website From Cybercriminals
Cybercriminals use every possible tool at their disposal to steal data, spam websites, or hack sensitive information from protected pages. Including a security layer to your website to prevent these is imperative. Spamming website forms is one of the most common attacks these days. Try adding CAPTCHA validation to your website’s forms to avoid these spam attacks.
