You must have seen certain websites where you cannot select/copy text to clipboard be it web or mobile devices. i.e unselectable elements like div or p. If you want to implement this functionality to your webpage then you can achieve it using simply pure CSS properties/attributes.
Properties to Disable copy to clipboard options.
For iOS and Safari browsers
-webkit-touch-callout : none
-webkit-user-select:none
webkit-touch-callout : none: No callout option will be shown when the user's touch and holds on the element with this attribute.
webkit-user-select : none: You cannot select text on Safari on macOS, if you do a right-click no options to copy is displayed.
For Mozilla firefox browser
-moz-user-select: none;
-moz-user-select: when set to none, text cannot be selected and copied to clipboard on Mozilla firefox browsers.
For Windows Internet Explorer (ie) browsers
-ms-user-select: none; user-select: none;
-ms-user-select: makes text unselectable in ie web and mobile browsers.
For Opera desktop and web browsers
-o-user-select: none;; user-select: none;
-o-user-select: none: makes text unselectable in ie web and mobile Opera browsers.
Example :<div style="-webkit-user-select: none;
-khtml-user-select: none;
-webkit-touch-callout : none
-moz-user-select: none;
-o-user-select: none;
user-select: none; background:#ffff22">
This text cannot be copied to the clipboard. Just try doing it :D </div>
Now let's create a div tag and add the above code in style attribute to check if it works!
Demo :- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- Linux Remove or Delete Files and Directories using Terminal Commands - Linux
- reCAPTCHA Implementation Tutorial - CSS
- FCM Messages Test Notification!!!! - Microsoft Teams, Google Hangouts push alert - News
- Find Duplicate Files using Mac Terminal Command - MacOS
- Git: Step-by-Step - How to Push Local Brach to GitHub - Git
- Step by Step: Spring Boot + JPA + MySQL + Redis as Cache - Java
- How to List all Packages installed using pip [Python] - Python
- Install Java Runtime Environment (Oracle or open JRE) on Ubuntu - Linux