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; :

element:

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.

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.

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

Auswahl von Text deaktivieren Codebeispiel kopieren:

CSS-Code:

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

<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:

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!