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 :- CSS: Apply opacity only for div background and not text
- 32 css cursors web developers must know
- How to place two div elements next to each other
- reCAPTCHA Implementation Tutorial
- align image at middle of div element
- Add scroll to div element in HTML Css
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to make jsfiddle bootstrap ready
- How to Center Align Image in Bootstrap
- Horizontally Center Align tag in HTML using CSS
- How to make div or text in html unselectable using CSS
More Posts:- How to make Android EditText not editable - Android
- Indent XML Formatting In Notepad++ - NotepadPlusPlus
- Send Extra Data with Ajax Get or Post Request - JavaScript
- How to un-hide tab bar in notepad++ - NotepadPlusPlus
- Disable Back Button in Android Programmatically - Android
- 97 Useful Notepad++ Keyboard Shortcuts - NotepadPlusPlus
- How to verify if java is installed on the computer and get version detail - Java
- Eclipse like Auto Import Shortcut in Intelij IDE Android Studio - Android-Studio
- [Solution] Installing Whatsapp There's insufficient space on the device - WhatsApp
- Unhandled exception type InterruptedException : Java Threads - Java
- Delete blank lines in a file using Notepad++ - NotepadPlusPlus
- fill_parent vs match_parent vs wrap_content - Android
- XmlRpcException ConnectException connection refused error - Java
- How to Setup maven on Mac OS X - Mac-OS-X
- Android ListView turns Black or Flickers while Scrolling - Android