So verhindern Sie, dass Benutzer Webseiteninhalte mit reinem CSS kopieren

Vorwort

Als ich mein eigenes persönliches Blog schrieb, wollte ich verschiedene Möglichkeiten zum Kopieren unterschiedlicher Inhalte auf der Blog-Detailseite haben. Ich möchte beispielsweise, dass Leser den Codeblock mit nur einem Klick kopieren können, was das lokale Debuggen für Leser erleichtert. Was den Textbeschreibungsteil betrifft, hoffe ich, dass Leser ihn nicht kopieren können. Als überzeugter Extremist, der für die Verwendung von CSS gegenüber JS plädiert, habe ich schließlich die Benutzerauswahl in CSS3 entdeckt.

Kompatibilität

Benutzerauswahl

Wird verwendet, um zu steuern, ob der Benutzer Text auswählen kann. Alles auswählen, Einige auswählen.

Alles auswählen

In vielen Fällen möchten Benutzer möglicherweise den gesamten Inhalt auf einmal kopieren, beispielsweise einen Code, ein Kennwort oder einige Schlüssel.
user-select:all: Ermöglicht dem Benutzer, Elemente mit einem einzigen Klick auszuwählen.
Hier demonstrieren wir die Effekte unter drei verschiedenen HTML-Tags.

 h2 {
        Benutzerauswahl: alle;
      }

      Code {
        Benutzerauswahl: alle;
        Breite: 500px;
        Anzeige: Block;
        Polsterung: 10px;
        Farbe: #31808c;
        Hintergrundfarbe: #f5f4ef;
      }

      div {
        Benutzerauswahl: alle;
      }

  <h2>Klicken Sie hier, um es auszuprobieren</h2>
    <vor>
        <Code>
        Konstantennummer = 1;

        const Ergebnis = (Funktion () {
          nummer löschen;
          Rückgabenummer;
        })();
        
        console.log(Ergebnis);
        </code>
    </pre>
    <p>
      const num = 1; const Ergebnis = (Funktion () { lösche num; returniere num; })();
      console.log(Ergebnis);
    </p>

Allerdings hat „Alles“ auch einen peinlichen Nachteil: Wenn Sie „Alles“ einstellen, können Sie manche Inhalte nicht auswählen.

Auswahl deaktivieren

Für Elemente auf einer Webseite können Sie user-select: none; verwenden, um zu verhindern, dass Benutzer Inhalte auswählen.

Teilweise ausgewählt

Warum gibt es dieses Sprichwort? Für normale Webseiten können wir bestimmte Inhalte auswählen. Beispielsweise können wir auf der folgenden Seite den Inhalt teilweise auswählen.

Der Titelteil bezieht sich hier aber hauptsächlich auf die Elemente, die auf der gegenüberliegenden Seite nicht ausgewählt werden können. Beispielsweise gibt es in HTML ein Tag namens sup, das hauptsächlich dazu verwendet wird, Elementen hochgestellte Zeichen hinzuzufügen.

<p>Ich habe eine Eckmarkierung hinter mir<sup>1</sup>Ich habe eine Eckmarkierung vor mir</p>

Wenn Sie diesen Text kopieren möchten: Ich habe eine Eckmarkierung 1 hinter mir und ich habe eine Eckmarkierung vor mir, wird diese Eckmarkierung ebenfalls kopiert.
An dieser Stelle müssen wir die Eckmarkierung setzen. Mit dieser Einstellung können wir auch sicherstellen, dass die Eckmarkierung beim Kopieren ignoriert wird, wenn Ihr p-Tag user-select:all ist!

sup {
  -webkit-Benutzerauswahl: keine;
  Benutzerauswahl: keine;
}

Erweiterung: Legen Sie den ausgewählten Stil fest

CSS stellt das Pseudoelement ::selection zum Formatieren von Textauswahlen bereit. Sie können Textauswahlen formatieren, indem Sie das Pseudoelement ::selection als Ziel verwenden. Es können jedoch nur die folgenden Eigenschaften festgelegt werden:

Farbe
Hintergrundfarbe
Cursor
Caret-Farbe
Umriss und seine Langschrift
Textdekoration und die damit verbundenen Eigenschaften
Texthervorhebungsfarbe (en-US)
Textschatten

Zum Beispiel

p::Auswahl {
  Farbe: #fffaa5;
  Hintergrundfarbe: #f38630;
  Textschatten: 2px 2px #31808c;
}

Der Effekt nach der Auswahl ist wie folgt:

Damit ist dieser Artikel darüber, wie Sie mit reinem CSS verhindern können, dass Benutzer Webseiteninhalte kopieren, abgeschlossen. Weitere Informationen dazu, wie Sie mit CSS verhindern können, dass Benutzer Inhalte kopieren, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!