CSS Textauswahl verhindern

1. Verwenden Sie das CSS-Attribut user-select, um die Textauswahl zu verhindern
2. Fügen Sie user-select: none zu einem Text hinzu
3. Fügen Sie dem Text in einer Tabelle das Attribut user-select hinzu
4. Abschluss

In CSS gibt es viele Attribute, die wir verwenden können, um ein Element zu modifizieren. Hier bezieht sich das Wort Modifikation auf das Styling eines Elements oder das Hinzufügen oder Entfernen verschiedener Steuerelemente eines Elements.

Verwenden Sie das CSS-Attribut user-select, um die Textauswahl zu verhindern

Beim Entwerfen von Webseiten fügen wir normalerweise Text hinzu, bei dem es sich um Absätze, Daten in einer Tabelle, Beschriftungen in einem Formular usw. handeln kann. Wenn dieser Text auf Webseiten erscheint, können Personen, die sie anzeigen, den Text auswählen und für verschiedene Aktivitäten kopieren .

Zum Beispiel kann jemand, der eine Webseite besucht, einen Text von dieser Seite auswählen und ihn für seinen Gebrauch kopieren; Einige Webseitenbesitzer bevorzugen dies jedoch nicht. Um das zu verhindern, können wir die Textauswahl blockieren.

CSS stellt uns ein Attribut zur Verfügung, um die Textauswahl zu verhindern, nämlich das Attribut user-select. Mit diesem Attribut können wir verhindern, dass Benutzer Text auswählen.

Aber wir alle verwenden verschiedene Arten von Webbrowsern. Wir sollten die Art und Weise ändern, wie wir dieses Attribut verwenden, wenn wir verschiedene Arten von Webbrowsern verwenden.

Nachfolgend haben wir gezeigt, wie Sie das Attribut user-select in verschiedenen Webbrowsern verwenden können.

Syntax:

-webkit-user-select: none;    /*Standard method. Can be used in Safari*/
-moz-user-select: none;       /*Standard method. Can be used in Firefox*/
-ms-user-select: none;        /*Standard method. Can be used in Internet Explorer or Edge*/
user-select: none;            /*Standard method. Can be used in Google Chrome*/

Die erste Methode ist für iOS- und Mac-Benutzer, da ihr Standardbrowser Safari ist. Firefox-Benutzer können die zweite Methode verwenden, und Benutzer, die Internet Explorer oder Edge verwenden, können die dritte Methode verwenden.

Diejenigen, die Google Chrome als Browser verwenden, können die vierte Methode verwenden.

In den obigen Syntaxen gibt es mehrere Optionen, die wir dem Wert des Attributs user-select zuweisen können.

In diesem Artikel besprechen wir die Option none des Attributs user-select, um zu verhindern, dass Benutzer den Text auswählen.

Fügen Sie user-select: none zu einem Text hinzu

Um dieses Konzept leicht zu verstehen, fügen wir wie folgt einen einfachen Text auf einer Webseite hinzu.

<div>
    <p class="unselect">This is a text</p>
</div>

Stile zum Text hinzufügen

Fügen wir diesem Text zur besseren Ansicht einige CSS-Stile hinzu.

.unselect{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

Hier haben wir dem Text einen font, font-size und padding gegeben. Es sollte so aussehen und wir können den Text auswählen.

Wie Sie sehen, können wir unseren Text wie gewohnt auswählen.

Fügen Sie das Attribut user-select mit dem Wert none hinzu

Nach dem Hinzufügen von Stilen können wir das Attribut user-select setzen, um die Textauswahl zu verhindern. Wir verwenden none als Wert des Attributs, wie unten gezeigt.

.unselect{
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

Wie Sie sehen können, ist unser Text jetzt nicht auswählbar.

Der obige Code funktioniert jedoch nur bei Verwendung des Google Chrome-Webbrowsers. Wir können den obigen Code so ändern, dass er in anderen Webbrowsern verwendet werden kann.

.unselect{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 30px;
    color: navy;
    padding-left: 10px;
}

<div>
    <p class="unselect">This is a text</p>
</div>

Fügen Sie dem Text in einer Tabelle das Attribut user-select hinzu

Lassen Sie uns nun eine Tabelle erstellen, um dieses Attribut auszuprobieren. Die Tabelle, die wir erstellen werden, hat zwei Spalten: Vorname und Nachname und zwei Zeilen mit relevanten Daten.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Wie Sie sehen können, haben wir die Tabelle erstellt, aber sie hat keine Stile. Lassen Sie uns unsere Tabelle mit CSS formatieren.

table {
    background-color: rgb(243, 150, 253);
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: auto;
}

td, th {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Wie das Ergebnis zeigt, haben wir unsere Tabelle formatiert. Sie können auch sehen, dass wir den Text in der Tabelle auswählen können, also lassen Sie uns versuchen, ihn zu deaktivieren.

Wie im vorherigen Beispiel können wir der Tabelle das Attribut user-select hinzufügen. Sie können es der gesamten Tabelle oder nur ausgewählten Zellen hinzufügen.

Wir werden das Attribut user-select nur für die Tabellenüberschriften hinzufügen. Wir können den folgenden Codeabschnitt zu demselben CSS-Code hinzufügen.

th{
    user-select: none; /*Standard method. Can use in Google Chrome*/
    -webkit-user-select: none; /*Standard method. Can use in Safari*/
    -moz-user-select: none; /*Standard method. Can use in Firefox*/
    -ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Styles.css">
        <title>HTML prevent text selection</title>
    </head>
    <body>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tr>
                <td>Jamie</td>
                <td>Anderson</td>
            </tr>
        </table>
    </body>
</html>

Wenn wir den Code ausführen, erhalten wir ein Ergebnis wie das folgende.

Wie Sie sehen können, kann nur der Text in den Kopfzeilen nicht ausgewählt werden.

Abschluss

In diesem Artikel wurde das Verhindern der Textauswahl erörtert und wie das CSS-Attribut user-select dabei hilft, dies zu erreichen. Wie wir gelernt haben, gibt es verschiedene Möglichkeiten, dieses Attribut in verschiedenen Webbrowsern zu verwenden.

Wir haben zwei Beispiele genommen, um die grundlegenden Dinge zur Verhinderung der Textauswahl zu verdeutlichen. Es gibt andere Methoden, aber CSS bietet eine einfache Möglichkeit, dies zu erreichen.