Languages
[Edit]
DE

HTML - wie deaktiviert man die Textauswahl?

0 points
Created by:
Nikki
10460

Mit HTML, JavaScript und CSS ist es möglich, die Textauswahl wie folgt zu entfernen.

1. Benutzerdefiniertes Beispiel fĂŒr eine kompatible RĂŒckseite

Bei diesem Ansatz wird die Option zur Textauswahl (und nicht nur diese) aus dem Element entfernt, indem die hinzugefĂŒgt wird:

  • spezifische Klasse (.disable-selection im Beispielcode defineirt)
  • unselectable="on" -Attribut - erforderlich fĂŒr IE < 10 und Opera < 15
  • onselectstart="return false;" - alternative Lösung fĂŒr Internet Explorer

Hinweise:

  • einige Browser unterstĂŒtzen immer noch nicht die user-select-Eigenschaft (hilfreiches Link), so dass es notwendig ist, PrĂ€fixe fĂŒr die volle LeistungsfĂ€higkeit zu verwenden.
  •  user-select-Eigenschaft ist nicht Teil des Standards - sie hat den Status eines Arbeitsentwurfs fĂŒr CSS4.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .disable-selection {
        -webkit-touch-callout: none; /* iOS Safari                         */
          -webkit-user-select: none; /* Safari                             */
           -khtml-user-select: none; /* Konqueror HTML                     */
             -moz-user-select: none; /* Firefox in der Vergangenheit (alte Versionen) */
              -ms-user-select: none; /* Internet Explorer (>=10) / Edge    */
                  user-select: none; /* Aktuell unterstĂŒtzt:               */
                                     /* Chrome, Opera und Firefox          */
    }

    div {
        margin: 10px;
        padding: 20px;
    }

  </style>
</head>
<body>
  <div class="disable-selection" 
       style="background: silver;" 
       unselectable="on"
       onselectstart="return false;">
     Dieser Text ist nicht auswÀhlbar ...
  </div>
  <div style="background: gold;">
     Dieser Text ist auswÀhlbar ...
  </div>
</body>
</html>

 

HTML (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

â€ïžđŸ’» 🙂

Join