Wie kann verhindert werden, dass Text mithilfe von CSS ausgewählt und kopiert wird? (Codebeispiel)

In der Front-End-Entwicklung kommt es manchmal zu einer solchen Situation: Nach einem Doppelklick auf den Text wird der Text ausgewählt, was sehr hässlich, überhaupt nicht schön und manchmal auf manchen Webseiten sehr unpraktisch ist Module wir nur Es ist notwendig, dass der Text nicht ausgewählt oder kopiert werden kann.

Wie lässt sich diese Anforderung realisieren und verhindern, dass der Text ausgewählt oder kopiert wird? In diesem Artikel lernen Sie die CSS-Methode kennen, um zu verhindern, dass Text ausgewählt und kopiert wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Die CSS-Methode zum Verhindern der Auswahl und des Kopierens von Text ist eigentlich sehr einfach. Wir können das Attribut user-select verwenden, um es zu vervollständigen. Werfen wir einen Blick auf diese Immobilie.

Das User-Select-Attribut ist ein neues Attribut in CSS3. Es kann verwendet werden, um die Auswählbarkeit von Inhalten zu steuern, festzulegen oder abzurufen, ob Benutzer Text auswählen dürfen, und gilt für alle Elemente außer Ersatzelementen.

Grundlegende Syntax:

user-select:value;

kann die folgenden Attributwerte festlegen:

auto: Standardwert, Text Die Auswahl basiert auf den Standardattributen des Browsers;

keine: kann so eingestellt werden, dass der Benutzer nichts im Element auswählen kann; :

set Benutzer können den Text im Element auswählen;

element:

Legen Sie den Text als optional fest, aber der Auswahlbereich wird durch die Elementgrenze eingeschränkt (dieser Attributwert ist). wird nur von IE und FF unterstützt)

alle: Alle Inhalte können als Ganzes ausgewählt werden. Wenn ein Doppelklick oder ein Kontextklick auf ein untergeordnetes Element erfolgt, wird das höchste Vorgängerelement ausgewählt, das zu diesem untergeordneten Element zurückreicht. Vereinfacht ausgedrückt: Das Zielelement wird als Ganzes ausgewählt, nicht nur als Teil. Der Browser wählt automatisch den Inhalt im gesamten Element aus.

-moz-none: Privater Firefox-Attributwert, das Festlegen des Textes von Elementen und Unterelementen ist nicht optional, Unterelemente können jedoch durch Text auf optional zurückgesetzt werden.

Browser-Unterstützung

Das obige Bild listet auf, wenn der Wert des Benutzerauswahlattributs „none|text|all“ ist. Der Grad In diesem Fall wird der Attributwert von den meisten Browsern nicht unterstützt und daher nicht aufgeführt.

Das Folgende ist ein einfaches Codebeispiel, um die Methode des

CSS-Benutzerauswahlattributs vorzustellen, um das Auswählen und Kopieren von Text zu verhindern

unter Berücksichtigung der Kompatibilität.

Auswahl von Text deaktivieren Codebeispiel kopieren:

CSS-Code:

.box{   
 -webkit-user-select: none;   
  -moz-user-select: none;    
  -ms-user-select: none;    
  user-select: none;
}

HTML-Code:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试文字，选择试试，你会发现怎么也选不中，无法复制，哈哈哈哈！
</div>

Hinweis:

Da IE6-9 das User-Select-Attribut nicht unterstützt, wenn Sie User-Select:none implementieren möchten, um zu verhindern, dass Text ausgewählt wird und beim Kopieren können Sie das Tag-Attribut onselectstart="return false;" verwenden. Safari und Chrome unterstützen dieses Tag-Attribut ebenfalls.

Zusammenfassung:

Das Obige ist der gesamte Inhalt der in diesem Artikel eingeführten CSS-Implementierung, um das Auswählen und Kopieren von Text zu verhindern. Sie können es selbst ausprobieren, um Ihr Verständnis des Benutzers zu vertiefen. Attribut auswählen. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter:

CSS-Video-Tutorial, HTML-Video-Tutorial, Bootstrap-Video-Tutorial!

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Text mithilfe von CSS ausgewählt und kopiert wird? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!