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.
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
状光标
如果不想让复制文本,通过设置CSS 的 user-select就可以达到目的。
user-select属性设置或检索是否允许用户选中文本。user-select的默认值是 text,可以选择文本。
在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。
语法:
user-select: auto|none|text|all;
值 | 描述 |
---|---|
auto | 默认。如果浏览器允许,则可以选择文本。 |
none | 防止文本选取。 |
text | 文本可被用户选取。 |
all | 单击选取文本,而不是双击。 |
只需要给文本元素添加“user-select:none;
-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属性 */
Wert | Beschreibung |
---|---|
auto | Standard. Text kann ausgewählt werden, wenn der Browser dies zulässt. |
keine | Textauswahl verhindern. |
Text | Text kann vom Benutzer ausgewählt werden. |
alle | Klicken Sie, um Text auszuwählen, anstatt zu doppelklicken. |
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 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>
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!