Comment désactiver une sélection de texte et d’images (HTML)

  • Article
  • 3 minutes de lecture

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment désactiver une sélection de texte ou d’images dans l’interface utilisateur d’une application du Windows Store en JavaSript.

Par défaut, un utilisateur ne peut pas sélectionner de contenu dans l’interface utilisateur de votre application du Windows Store en JavaScript.

Si vous voulez autoriser la sélection d’éléments qui contiennent du texte, des images et d’autres contenus non-propriétaires, vous pouvez remplacer le comportement par défaut en utilisant une propriété des feuilles de style en cascade (CSS) : -ms-user-select.

La propriété -ms-user-select prend en charge les valeurs suivantes :

  • none
    La sélection au sein de l’élément n’est pas possible. En revanche, l’élément lui-même peut être inclus dans une sélection. Ceci est le comportement par défaut pour l’élément body de niveau supérieur et, par héritage, tous les éléments d’interface utilisateur dans les applications du Windows Store en JavaScript.

  • element
    La sélection au sein de l’élément (et de tous ses éléments enfants) est possible). Elle est toutefois contrainte par les limites de l’élément.

  • text
    La sélection au sein de l’élément est possible et n’est pas contrainte par les limites de l’élément.

Remarque  Il est nécessaire de définir cette propriété pour partager du contenu et copier et coller à partir du Presse-papiers.

 

Ce que vous devez savoir

Technologies

Prérequis

Cette rubrique suppose que vous savez créer une application du Windows Store de base en JavaScript qui reprend le modèle Bibliothèque Windows pour JavaScript.

Instructions

Comportements de sélection

La sélection est désactivée pour les objets qui possèdent un élément parent doté d’un gestionnaire d’événements click, MSGestureTap ou mouseup défini.

Pour remplacer ce comportement et activer la sélection même si des gestionnaires click, MSGestureTap ou mouseup sont présents, vous devez appliquer la propriété CSS touch-select à l’objet et attribuer à la propriété la valeur grippers.

La sélection est annulée si vous appelez preventDefault à partir d’un quelconque des gestionnaires d’événements suivants :

Désactiver la sélection de tous les éléments d’interface utilisateur

Il peut arriver que vous souhaitiez désactiver spécifiquement la sélection pour tous les éléments d’interface utilisateur au sein de votre application.

Cet exemple exclut de la sélection tous les éléments d’interface utilisateur en appliquant la propriété -ms-user-select, avec une valeur de none, à l’élément <html> et à tous ses éléments enfants modifiables.

Remarque  Nous vous recommandons d’affecter à la propriété cursor la valeur default pour garantir un retour d’interface utilisateur cohérent entre tous les éléments.

 

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

Activer la sélection pour les éléments d’interface utilisateur non modifiables

Si vous avez verrouillé la sélection pour l’ensemble de votre application et souhaitez annuler ce paramètre pour le contenu d’un élément d’interface utilisateur particulier, appliquez simplement l’attribut -ms-user-select à cet élément et définissez la valeur d’attribut sur element. Cette valeur contraint la sélection aux limites de l’élément.

Cet exemple autorise la sélection du contenu d’un élément (ainsi que du contenu de ses éléments enfants) avec l’ID spécifié.

Remarque  Nous vous recommandons de définir de manière explicite la valeur de la propriété cursor sur text pour différencier le retour interface utilisateur pour cet élément.

 

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

Rubriques associées

Recommandations en matière de sélection de texte et d’images

Exemples

Zones de contenu non sélectionnable avec un exemple d’attribut CSS -ms-user-select