So verbieten Sie das Kopieren von Artikelinhalten in CSS

青灯夜游
Freigeben: 2022-08-12 18:22:31
Original
3515 Leute haben es durchsucht

In CSS können Sie das Attribut „user-select“ verwenden, um das Kopieren von Artikelinhalten zu verhindern. Fügen Sie einfach den Stil „user-select:none;“ hinzu. Das User-Select-Attribut wird verwendet, um festzulegen oder abzurufen, ob der Benutzer Text auswählen darf. Wenn der Wert dieses Attributs auf „none“ gesetzt ist, kann das Textelement nicht mit der Maus ausgewählt werden, wodurch der Effekt eines Kopierverbots erzielt wird von Text.

So verbieten Sie das Kopieren von Artikelinhalten in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Im Allgemeinen hat der kopierbare Text auf einer Webseite den folgenden I-CursorI 状光标

So verbieten Sie das Kopieren von Artikelinhalten in CSS

如果不想让复制文本,通过设置CSS 的 user-select就可以达到目的。

user-select属性设置或检索是否允许用户选中文本。user-select的默认值是 text,可以选择文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

语法:

user-select: auto|none|text|all;
Nach dem Login kopieren
描述
auto默认。如果浏览器允许,则可以选择文本。
none防止文本选取。
text文本可被用户选取。
all单击选取文本,而不是双击。

只需要给文本元素添加“user-select:none;

So verbieten Sie das Kopieren von Artikelinhalten in CSS

Wenn Sie keinen Text kopieren möchten, können Sie diesen Zweck erreichen, indem Sie die CSS-Benutzerauswahl festlegen.

Das Attribut „Benutzerauswahl“ legt fest oder ruft ab, ob der Benutzer Text auswählen darf. Der Standardwert der Benutzerauswahl ist Text, mit dem Text ausgewählt werden kann.


Wenn Sie in einem Webbrowser auf Text doppelklicken, wird der Text ausgewählt oder hervorgehoben. Diese Eigenschaft wird verwendet, um dieses Verhalten zu verhindern.

So verbieten Sie das Kopieren von Artikelinhalten in CSS

Syntax:

-moz-user-select:none; /* Firefox私有属性 */

-webkit-user-select:none; /* WebKit内核私有属性 */

-ms-user-select:none; /* IE私有属性(IE10及以后) */

-khtml-user-select:none; /* KHTML内核私有属性 */

-o-user-select:none; /* Opera私有属性 */

user-select:none; /* CSS3属性 */
Nach dem Login kopieren
WertBeschreibung
autoStandard. Text kann ausgewählt werden, wenn der Browser dies zulässt.
keineTextauswahl verhindern.
TextText kann vom Benutzer ausgewählt werden.
alleKlicken Sie, um Text auszuwählen, anstatt zu doppelklicken.
Fügen Sie einfach den Stil „user-select:none;“ zum Textelement hinzu, damit das Textelement nicht vom ausgewählt werden kann Erzielen Sie den Effekt, dass das Kopieren von Text verboten wird.

Da das User-Select-Attribut eine neue Funktion in der CSS3-Spezifikation ist, weist es Kompatibilitätsprobleme auf und muss daher für verschiedene Browser vorangestellt werden.

So verbieten Sie das Kopieren von Artikelinhalten in CSSSo verbieten Sie das Kopieren von Text:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style>
.test{
padding:10px;
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
background:#eee;}
</style>
</head>
<body>
<div onselectstart="return false;" unselectable="on">选择我试试,你会发现怎么也选择不到我,哈哈哈哈</div>
</body>
</html>
Nach dem Login kopieren

Effekt (jetzt dieser Pfeilcursor):

🎜🎜🎜🎜Beispiel: Verbieten Sie die Auswahl von Text, um die Funktion zum Verbot des Kopierens von Text zu implementieren🎜🎜rrreee🎜🎜🎜🎜 (Lernen Video teilen: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo verbieten Sie das Kopieren von Artikelinhalten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage