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
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- How to activate and use Microsoft Teams Together mode - Microsoft
- List of 32 CSS cursors web developers must know about - CSS
- List of jars required for Struts2 project - Java
- How to uninstall pip Python packages - Python
- Run Java Code Every Second - Java
- How to copy file name and path to clipboard in Notepad++ - NotepadPlusPlus
- [Solved] SharePoint Search Internal server error exception - SharePoint
- hibernate.cfg.xml Configuration and Mapping xml Example - Java