An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
September 19, 2022 09:05 am GMT
Original Link: https://dev.to/fanmixco/how-to-disable-printing-in-a-website-591n
How to disable printing on a website
Sometimes, we have some projects where the content is sensitive or should be protected for privacy or copyrights. A quick solution involves:
- To prevent the key combination Ctrl + P (for printing) via JS.
- To prevent selecting text and copying text via JS.
- To hide the whole page on printing via CSS.
<script> //Prevents Ctrl + P //From https://stackoverflow.com/a/47848090/1928691 window.addEventListener('keydown', function(event) { if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) { event.preventDefault(); if (event.stopImmediatePropagation) { event.stopImmediatePropagation(); } else { event.stopPropagation(); } return; } }, true); //Disables text selection and copying //From https://gist.github.com/pbaruns/a24ad79b027956ed5d77fd3e6c201467 if (typeof document.onselectstart!="undefined" ) { document.onselectstart=new Function ("return false" ); } else { document.onmousedown=new Function ("return false" ); document.onmouseup=new Function ("return true" ); }</script><style> /*From https://stackoverflow.com/a/3359980/1928691*/ @media print { html, body { display: none; /* hide whole page */ } }</style>
For sure, there will be more advanced solutions that will involve detecting if the browser is in Reader Mode or trying to encrypt the readable text. However, this is just a quick solution that can empower you in your journey.
Follow me at:
Original Link: https://dev.to/fanmixco/how-to-disable-printing-in-a-website-591n
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To