Markieren von Text abschalten ohne Javascript per CSS

Ganz ohne Javascript und das überall verbreitete onselectstart bzw. onselect lässt sich das Selektieren von Text per CSS (bzw. über das Setzen eines Attributes für den Internet Explorer und Opera) verhindern.

Dazu sei als Allererstes erwähnt, dass ich diese Möglichkeit NIE auf normalen Text einer Webseite anwenden würde, da so die Usability EXTREM eingeschränkt wird und der Besucher verwirrt die Seite verlässt. Außerdem kann sich der findige Besucher auch über den Quelltext der Seite entsprechende Textpassagen kopieren - als Kopierschutz sollte diese Methode also nicht erwägt werden!

Wozu das ganze also überhaupt?

Ich bin vor kurzem bei der Weiterentwicklung der custom Form Elements auf ein Problem gestossen, als ich ein Text-Label einer Schaltfläche (dynamisch generiert) vor versehentlichem Markieren schützen wollte. Schaltflächen lassen wie gewohnt ein Markieren ihres Label eh nicht zu und dieses Verhalten musste ich imitieren. Die Lösung habe ich nach einiger Recherche zusammengetragen und sie funktioniert bei mir für IE 6/7, Opera 9, Netscape, Firefox 2, Safari:

Mootools code (Eigenschaften per JS setzen):

if(window.ie || window.opera){this.lab.setProperty("unselectable","on");}
if(window.gecko){this.lab.setStyle("MozUserSelect","none");}
if(window.webkit){this.lab.setStyle("KhtmlUserSelect","none");}

CSS / Attribut

.myUnselectableText{
/* Gecko-based, Mozilla */
-moz-user-select:none;
/* Safari */
-khtml-user-select: none;
}

Für Opera und IE 6/7 wird die Eigenschaft unselectable gesetzt.
Anmerkung: ein XHTML Dokument validiert nicht mehr, wird diese Eigenschaft in den Quelltext geschrieben,
also sollte man dieses Attribut lieber per JS setzen :)

<p class="myUnselectableText" unselectable="on"/>Absatz</p>
  • Abgelegt unter: BRS
  • Erstellungsdatum: 24 Okt 2007
  • 4 Kommentare ansehen

Kommentare ( als RSS 2.0-Feed abonnieren - Trackback-URL - Kommentar schreiben )

  1. Kommentar von mediavrog

    @Thomas:

    Wie ich oben beschrieben habe ist der Einsatz dieser Eigenschaften im Allgemeinen natürlich kritisch zu hinterfragen. Ich denke in deinem Falle, in Webanwendungen mit Funktionen wie von dir beschrieben, können sie ohne Weiteres zum Einsatz kommen um die Usability zu gewähren.

    • Gravatar
    • #4
  2. Kommentar von mediavrog

    Danke Cornholio für die Hinweise.
    Das mit den Kommentaren war wohl eher ein Schusselfehler aber die Eigenschaften müssen wahrlich (falls direkt ins CSS geschrieben) -moz-user-select:none; und -khtml-user-select:none; heißen.

    Interessanterweise wird es trotzdem korrekt interpretiert :)

    Danke und Grüße

    • Gravatar
    • #3
  3. Kommentar von Thomas

    Hallo Maik,

    ich kann nur danke, danke, danke sagen. Ich habe mir schon fast die Finger wund gesucht nach diesen CSS Regeln. Leider hört man ja überall nur die Diskussionen ob das nun angebracht ist oder nicht, da ich aber an einem Webprojekt arbeite, bei dem Tabellen-Zellen ausgewählt (einfach Klick und doppel Klick) werden sollen musste ich etwas finden, da mir vorher immer die Zellen bzw Textteile markiert wurden.

    Darum noch einmal Danke
    Gruß Thomas

    • Gravatar
    • #2
  4. Kommentar von Cornholio

    Die CSS Attribute sind nicht ganz richtig. Richtig muss es heissen:

    .myUnselectableText{
    /* Gecko-based, Mozilla */
    -moz-user-select:none;
    /* Safari */
    -khtml-user-select:none;
    }

    Ausserdem sind “//” kommentare in StyleSheets nicht zulässig.

    MozUserSelect und KhtmlUserSelect sind Javascript Objekteigenschaften.

    • Gravatar
    • #1

Schreib was dazu...

XHTML: Du kannst die folgenden Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Icon: Notiz
top top