So wird's gemacht: Verhindern (oder Ermöglichen) der Textauswahl auf Ihrer Webseite mit CSS

Die -ms-user-select-Eigenschaft ist eine neue CSS-Eigenschaft (Cascading Stylesheets), mit der App- und Webentwickler steuern können, wo Benutzer Text auf ihren Webseiten oder Windows Store-Apps mit JavaScript auswählen können. In diesem Thema erhalten Sie Anleitungen zum Implementieren der -ms-user-select-Eigenschaft auf Ihrer eigenen Webseite. (Die -ms-user-select-Eigenschaft wird auf genau die gleiche Weise in einer Windows Store-App mit JavaScript implementiert.) Das Thema umfasst die folgenden Abschnitte:

Hinweis  Die user-select-Eigenschaft ist derzeit kein Teil einer CSS-Spezifikation des World Wide Web Consortium (W3C). Sie wurde ursprünglich im Modul Benutzeroberfläche für CSS3 vorgeschlagen, aber dieses Modul wurde durch das Modul Grundlegende CSS3-Benutzeroberfläche ersetzt, das die user-select-Eigenschaft nicht enthält. Andere wichtige Browser unterstützen ihre eigenen vorgefertigten Versionen dieser Eigenschaft. Zwischen den drei Implementierungen bestehen geringe Unterschiede. Testen Sie Ihre App daher in mehreren Browsern.

Einführung

In vielen Szenarios ist es wichtig, dass Benutzer auf Webseiten Text auswählen können. Nehmen wir als Beispiel eine typische Nachrichtenwebsite. Die meisten Seiten umfassen Nachrichtenartikel, deren Inhalte Benutzer möglicherweise auswählen möchten, um sie mit anderen zu teilen. Die Seiten enthalten aber wahrscheinlich auch Menüs, Werbeanzeigen und Links zu anderen Bereichen der Website, die Benutzer vermutlich nicht benötigen oder auswählen möchten. Durch die Unterstützung für die neue -ms-user-select CSS-Eigenschaft in Windows Internet Explorer 10 können Sie festlegen, dass die Textauswahl z. B. im Hauptteil des Nachrichtenartikels möglich, aber in den Menüs nicht zulässig ist.

Verwenden von "-ms-user-select"

Die -ms-user-select-Eigenschaft hat vier mögliche Werte:

SchlüsselwortBeschreibung

element

Der Text kann ausgewählt werden, wenn die Auswahl innerhalb des angegebenen Elements begonnen wird. Die Textauswahl ist jedoch auf die Grenzen dieses Elements beschränkt.

none

Der Text kann nicht ausgewählt werden, wenn die Auswahl innerhalb des angegebenen Elements begonnen wird. Wenn die Textauswahl aber außerhalb des angegebenen Elements begonnen wird, kann das Element dennoch ausgewählt werden.

text

Der Text kann ausgewählt werden, wenn die Auswahl innerhalb des angegebenen Elements begonnen wird. Die Textauswahl ist nicht auf die Elementgrenzen beschränkt und kann über die Grenzen hinaus ausgeweitet werden.

auto

Dies ist der Anfangswert. Wenn das Element bearbeitbaren Text enthält, z. B. ein input-Element oder ein Element, bei dem contenteditable auf "true" festgelegt ist, kann der Text ausgewählt werden. Andernfalls wird die Auswahl durch den Wert der -ms-user-select-Eigenschaft des übergeordneten Knotens festgelegt.

 

Bei unserer Nachrichtenwebsite können Sie beispielsweise für die gesamte Seite -ms-user-select auf "none" und dann für den Hauptartikel -ms-user-select auf "element" festlegen. Dadurch kann nur der Artikeltext ausgewählt werden. Personen, die den Inhalt eines Nachrichtenartikels auswählen möchten, möchten wahrscheinlich nicht die Fußzeilenelemente unterhalb des Artikels auswählen. Wenn -ms-user-select daher auf "element" festgelegt ist, können sie einfach nur den Inhalt des Artikels auswählen, ohne sich Gedanken darüber machen zu müssen, ob der Cursor auch genau positioniert ist. Dies betrifft besonders Benutzer, die mit dem Finger navigieren.

Sie können die Textauswahl in jedem Seitenelement deaktivieren, indem Sie -ms-user-select auf "none" festlegen. Der Benutzer kann dann keine Textauswahl innerhalb des angegebenen Textblocks beginnen. Wenn der Benutzer aber Text in einem anderen Bereich der Seite auswählt, kann die Auswahl auf jeden Bereich der Seite ausgedehnt werden, auch auf Bereiche, in denen -ms-user-select auf "none" festgelegt ist.

Beispielimplementierung

Die IE-Testversion enthält eine interaktive Demo der -ms-user-select-Eigenschaft. In der Demo wird ein Modell eines Blogbeitrags mit mehreren unterschiedlichen Bereichen mit Textinhalten gezeigt: der gesamte Blog ("#blog"), der sich aus dem Blogbeitrag ("#blogPost") und mehreren Kommentaren (".comment") zusammensetzt. Jeder Bereich besteht wiederum aus verschiedenen Textelementen, darunter input- und textarea-Elemente, sowie Elemente, bei denen die contenteditable-Eigenschaft auf "true" festgelegt ist.

Screenshot der user-select-Demo in der IE-Testversion

Das Popupmenü links auf der Seite enthält mehrere Optionen zum Festlegen der -ms-user-select-Eigenschaft für Seitenelemente. Gehen wir kurz die in der Demo in diesem Popupmenü aufgelisteten Optionen durch.

Normal selection

Diese Option gibt an, dass -ms-user-select für keine Elemente auf der Seite festgelegt wurde. Benutzer können nach Belieben Text in jedem gewünschten Element auswählen.

Turn off selection except in editable content

Diese Option legt -ms-user-select für den gesamten Blog auf "none" fest. Das bedeutet, dass nichts ausgewählt werden kann, außer Text in bearbeitbaren Bereichen, z. B. in den Feldern "Name" und "Comment".


#blog { 
  -ms-user-select:none;
} 

Turn off selection everywhere

Diese Option legt -ms-user-select für alle Elemente auf "none" fest. Dazu gehören in diesem Fall auch die Benutzereingabefelder (input- und textarea-Elemente) und alle anderen Elemente, bei denen contenteditable auf "true" festgelegt ist. Das bedeutet, dass nichts ausgewählt werden kann, auch kein Text in bearbeitbaren Bereichen.


#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { 
  -ms-user-select:none;
}

Select blog post content only

Diese Option legt -ms-user-select für Elemente mit der ID "blogPost" auf "element" und -ms-user-select für den gesamten Blog auf "none" fest. Das bedeutet, dass nur der Text des Blogbeitrags ausgewählt werden kann.


#blogPost {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Select comments only

Diese Option legt -ms-user-select für alle Elemente mit der Klasse "comment" auf "element" und -ms-user-select für den gesamten Blog auf "none" fest. Das bedeutet, dass nur der Kommentartext ausgewählt werden kann.


.comment {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Selection starts in blog post or comments but can extend

Diese Option legt -ms-user-select für alle Elemente mit der ID "blogPost" oder der Klasse "comment" auf "text" sowie -ms-user-select für den gesamten Blog auf "none" fest. Das bedeutet, dass die Textauswahl nur innerhalb des Blogbeitrags oder der Kommentare beginnen kann, jedoch auf Bereiche außerhalb dieser Elemente ausgeweitet werden kann. Die Textauswahl kann aber nicht außerhalb des Blogbeitrags oder der Kommentare begonnen werden.


#blogPost, .comment { 
  -ms-user-select:text;
} 

#blog { 
  -ms-user-select:none;
}

Unterstützung in anderen Browsern

Zum gegenwärtigen Zeitpunkt unterstützen Mozilla und WebKit ihre eigenen vordefinierten Versionen der user-select-Eigenschaft. Die Implementierungen weisen jedoch mehrere Unterschiede auf. Die neuesten Informationen finden Sie über die folgenden Links:

Verwandte Themen

Demo in der IE-Testversion: User-Select
Beispiele und Lernprogramme zu Internet Explorer 10

 

 

Anzeigen:
© 2014 Microsoft