So wird’s gemacht: Deaktivieren der Auswahl von Text und Bildern (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Hier erfahren Sie, wie Sie das Auswählen von Text und Bildern in der UI einer Windows Store-App mit JavaScript deaktivieren können.

Standardmäßig kann ein Benutzer keinen Inhalt in der Benutzeroberfläche Ihrer Windows Store-App mit JavaScript auswählen.

Falls Sie die Auswahl von Elementen, die Text, Bilder und andere nicht urheberrechtlich geschützte Inhalte enthalten, zulassen möchten, müssen Sie das Standardverhalten mit einer Cascading Stylesheets (CSS)-Eigenschaft überschreiben: -ms-user-select.

Die Eigenschaft -ms-user-select unterstützt die folgenden Werte:

  • keine
    Eine Auswahl innerhalb des Elements ist nicht möglich. Allerdings kann das Element selbst trotzdem ausgewählt werden. Dies ist das Standardverhalten für das body-Element auf oberster Ebene und – aufgrund der Vererbung – für alle UI-Elemente in Windows Store-Apps mit JavaScript.

  • Element
    Eine Auswahl innerhalb des Elements und aller untergeordneten Elemente ist möglich. Jedoch ist die Auswahl auf die Elementgrenzen beschränkt.

  • text
    Eine Auswahl innerhalb des Elements ist möglich und ist nicht auf die Elementgrenzen beschränkt.

Hinweis  Diese Einstellung muss festgelegt werden, um Inhalte freigeben, in die Zwischenablage kopieren und aus ihr einfügen zu können.

 

Wissenswertes

Technologien

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie mit JavaScript eine einfache Windows Store-App erstellen können, wobei die Vorlage der Windows-Bibliothek für JavaScript verwendet wird.

Anweisungen

Auswahlverhalten

Die Auswahl ist für Objekte deaktiviert, für deren übergeordnetes Element ein click-, MSGestureTap- oder mouseup-Ereignishandler definiert ist.

Um dieses Verhalten zu überschreiben und die Auswahl auch dann zu ermöglichen, wenn click-, MSGestureTap- oder mouseup-Handler vorhanden sind, müssen Sie die touch-select-CSS-Eigenschaft auf das Objekt anwenden und der Eigenschaft den Wert grippers zuweisen.

Die Auswahl wird abgebrochen, wenn Sie preventDefault in einem der folgenden Ereignishandler aufrufen:

Deaktivieren der Auswahl für alle UI-Elemente

In einigen Fällen möchten Sie die Auswahl in Ihrer App möglicherweise für alle UI-Elemente ausdrücklich deaktivieren.

In dem Beispiel unten werden alle UI-Elemente von der Auswahl ausgenommen, indem die Eigenschaft -ms-user-select mit dem Wert none für das <html>-Element und alle bearbeitbaren untergeordneten Elemente übernommen wird.

Hinweis  Wir empfehlen außerdem, den Wert der Eigenschaft cursor auf default festzulegen, um ein konsistentes UI-Feedback für alle Elemente sicherzustellen.

 

html  input, textarea, *[contenteditable=true] 
{
    -ms-user-select: none;
    cursor: default;
}

Aktivieren der Auswahl für nicht bearbeitbare UI-Elemente

Wenn Sie die Auswahl von UI-Elementen global für Ihre App deaktiviert haben, diese Einstellung aber für den Inhalt eines bestimmten UI-Elements übergehen möchten, wenden Sie auf dieses Element einfach das Attribut -ms-user-select an, und setzen Sie den Wert des Attributs auf element. Dadurch wird die Auswahl auf die Elementgrenzen beschränkt.

In dem Beispiel unten ist die Auswahl für den Inhalt des Elements mit der angegebenen ID aktiviert (einschließlich der Inhalte von untergeordneten Elementen).

Hinweis  Wir empfehlen außerdem, den Wert der Eigenschaft cursor explizit auf text festzulegen, um das UI-Feedback für dieses Element vom UI-Feedback der anderen Elemente abzugrenzen.

 

#selectableDiv 
{
    -ms-user-select: element;
    cursor: text;
}

Verwandte Themen

Richtlinien für die Text- und Bildauswahl

Beispiele

CSS-Attributbeispiel für nicht auswählbare Inhaltsbereiche mit "-ms-user-select"