So deaktivieren Sie Textauswahl, Ausschneiden, Kopieren, Einfügen und Rechtsklick auf eine Webseite
Wenn Sie verhindern möchten, dass andere Inhalte von Ihrer Website stehlen, können Sie dies teilweise mithilfe von CSS, JavaScript und jQuery tun. In diesem Artikel erfahren Sie, wie Sie die Textauswahl deaktivieren, ausschneiden, kopieren, einfügen und mit der rechten Maustaste auf eine Webseite klicken.
Deaktivieren Sie die Textauswahl mit CSS oder JavaScript
Sie können die Textauswahl einer kompletten Webseite oder eines Teils der Seite mit CSS, JavaScript oder jQuery deaktivieren.
So deaktivieren Sie die Textauswahl der gesamten Webseite mit JavaScript
Verwenden Sie die Ereignisattribute onmousedown und onselectstart mit dem Tag body , um die Textauswahl einer kompletten Webseite zu deaktivieren. Diese Ereignisse überschreiben das Standardverhalten der Browser.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>So deaktivieren Sie die Textauswahl eines Teils der Webseite mit JavaScript
Verwenden Sie die Ereignisattribute onmousedown und onselectstart mit dem HTML- Tag für diejenigen, für die Sie die Textauswahl deaktivieren möchten. Im folgenden Beispiel ist die Textauswahl für das 2. div- Tag deaktiviert.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div onmousedown="return false" onselectstart="return false">
Text selection is disabled for this text.
</div>
</body>
</html>So deaktivieren Sie die Textauswahl der gesamten Webseite mit CSS
Verwenden Sie die CSS-Eigenschaft user-select mit dem body- Tag, um die Textauswahl einer kompletten Webseite zu deaktivieren. Bei einigen Browsern müssen Sie vor der Benutzerauswahl eine Erweiterung hinzufügen. Hier ist die vollständige Liste der Eigenschaften für alle Browser:
- Chrome , Opera : Benutzerauswahl
- Safari : -webkit-user-select
- Mozilla : -moz-user-select
- IE 10+ : -ms-user-select
Sie müssen alle diese Eigenschaften auf none setzen, um die Textauswahl zu deaktivieren.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>So deaktivieren Sie die Textauswahl eines Teils der Webseite mit CSS
Verwenden Sie die vom Benutzer ausgewählte CSS-Eigenschaft mit dem HTML- Tag für diejenigen, für die Sie die Textauswahl deaktivieren möchten. Sie können diese HTML-Elemente mithilfe einer Klasse oder ID ansprechen. Im folgenden Beispiel ist die Textauswahl für das 2. div- Tag deaktiviert. Hier wird Klasse verwendet, um das 2. Div anzuvisieren.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
.disable-text-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div class="disable-text-selection">
Text selection is disabled for this text.
</div>
</body>
</html>So deaktivieren Sie das Ausschneiden, Kopieren und Einfügen mit JavaScript
Sie können Ausschneiden, Kopieren und Einfügen mithilfe der Ereignisattribute oncut , oncopy und onpaste mit den Ziel-HTML-Elementen deaktivieren. Wenn Sie das Ausschneiden, Kopieren und Einfügen für die gesamte Webseite deaktivieren möchten, müssen Sie diese Ereignisattribute mit dem body-Tag verwenden. Sie können Drag & Drop auch mit ondrag- und ondrop- Ereignisattributen deaktivieren. Im folgenden Beispiel sind Ausschneiden, Kopieren, Einfügen, Ziehen und Ablegen für das Eingabe-Tag deaktiviert.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the below input element.
</div>
<input
type="text"
onselectstart="return false"
oncut="return false"
oncopy="return false"
onpaste="return false"
ondrag="return false"
ondrop="return false"
/>
</body>
</html>So deaktivieren Sie das Ausschneiden, Kopieren und Einfügen mit jQuery
Sie können das Ausschneiden, Kopieren und Einfügen auf einer Webseite mit der Funktion jQuery bind() deaktivieren. In der Funktion bind() müssen Sie die Ereignisse zum Ausschneiden, Kopieren und Einfügen angeben, die ausgelöst werden, wenn ein Benutzer versucht, etwas auf der Webseite auszuschneiden, zu kopieren oder einzufügen. Stellen Sie sicher, dass Sie das script-Tag in den Kopfabschnitt einbetten, um jQuery zu laden, bevor Sie es verwenden.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the complete web page.
</div>
<input type="text" />
<script type="text/javascript">
$(document).ready(function() {
$('body').bind('cut copy paste', function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>So deaktivieren Sie den Rechtsklick auf eine Webseite mit JavaScript
Sie können den Rechtsklick auf Ihre Webseite deaktivieren, indem Sie ein oncontextmenu- Ereignis verwenden und "return false" in den Ereignishandler einfügen.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
document.oncontextmenu = new Function("return false");
</script>
</body>
</html>So deaktivieren Sie den Rechtsklick auf eine Webseite mit jQuery
Sie können den Rechtsklick auf Ihre Webseite über das Kontextmenü- Ereignis deaktivieren .
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
$(document).bind("contextmenu",function(e){
return false;
});
</script>
</body>
</html>Schützen Sie Ihre Website vor Cyberkriminellen
Cyberkriminelle nutzen jedes ihnen zur Verfügung stehende Werkzeug, um Daten zu stehlen, Websites zu spammen oder sensible Informationen von geschützten Seiten zu hacken. Um dies zu verhindern, ist es unerlässlich, eine Sicherheitsschicht in Ihre Website aufzunehmen. Das Spamming von Website-Formularen ist heutzutage einer der häufigsten Angriffe. Versuchen Sie, den Formularen Ihrer Website eine CAPTCHA-Validierung hinzuzufügen, um diese Spam-Angriffe zu vermeiden.