Niet te selecteren tekst op je website: hoe doe je dat eenvoudig?

Stel, je hebt je best gedaan op een stuk tekst op je website. En die tekst is eigenlijk zo goed, dat je niet wilt dat anderen die tekst makkelijk kunnen kopiëren. Maar het is internet, dus alles is heel makkelijk te kopiëren. Hoe voorkom je dat mensen jouw tekst heel makkelijk kopiëren en gebruiken op hun eigen website? Dan moet je ervoor zorgen dat die tekst niet te selecteren is. Hoe je dat doet leg ik hier onder uit.

Kopiëren van tekst

Een kopie maken van een stuk tekst op internet is heel eenvoudig. Je selecteert de tekst die je wilt hebben met je muis, selecteert het en plakt het vervolgens op je eigen pagina. Dit is een actie die niet meer dan 5 seconden hoeft te duren. Het selecteren van de tekst is drie seconden, het kopiëren één seconde en ook het plakken duurt één tel.

Moeilijker maken

Als je niet wilt dat anderen zo makkelijk met jouw tekst aan de haal gaan, zul je het ze dus iets moeilijker moeten maken. In CSS bestaat de mogelijkheid om de tekst niet selecteerbaar te maken. Dan is de tekst nog wel te kopiëren natuurlijk, want overtypen kan altijd, maar ze moeten er wel meer werk voor doen.

Niet te selecteren in CSS

Wil je een (stuk) tekst op je website die niet te selecteren is? In sommige gevallen kan dat wenselijk zijn. Bijvoorbeeld als je wilt dat men het niet (eenvoudig) kan kopiëren. Het is niet heel moeilijk. Zet dan die tekst in een span of div en zet dan het volgende in de css class van die span of div:

-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently

Vond je dit een goede tip? Ik heb er nog meer voor je! Wanneer je de knop hieronder gebruikt kom je leuke handigheidjes tegen.

(Visited 180 times, 1 visits today)