Les pseudo-classes :in-range et :out-of-range.

:in-range
:out-of-range

Résumé des caractéristiques du sélecteur :in-range

Description rapide
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
Statut du document: WD (document de travail)

Description des pseudo-classes :in-range et :out-of-range.

La pseudo-classe :in-range cible les éléments (zones de saisie) dont la valeur est dans la plage autorisée. A l'inverse :out-of-range cible les éléments dont la valeur est en dehors de la plage autorisée.

La plage des valeurs autorisée est définie par les attributs min et max d'une balise input. Remarque. La vérification de la valeur se fait au moment de la validation du formulaire : les balises form et /form doivent donc être présentes. Un bouton submit est également conseillé pour faciliter la demande de validation.

L'exemple ci-dessous est le code HTML minimal pour obtenir le fonctionnement. A droite vous pouvez constater le fonctionnement de base (sans styles CSS) en tapant des valeurs hors plage et en cliquant sur le bouton OK.

<form method="post" action="" > <input type="number" min="18" max="65" /> <input type="submit" value="ok"/> </form>

La norme prévoit que les zones de saisies qui ne comportent ni d'attribut min ni d'attribut max ne soient ciblées ni par :in-range, ni par :out-of-range. Dans la pratique, certains navigateurs considèrent que leur valeur est toujours dans la plage autorisée (puisqu'il n'y a pas de limites définies), et les font cibler par :in-range.

De nombreux types de zones de saisie comportent les attributs min et max, mais l'utilisateur n'a pas la possibilité de saisir une valeur hors de ces limites. C'est le cas des sliders (input type="range" /), des zones de saisie de date, etc. Pour ces éléments, c'est toujours le sélecteur :in-range qui est activé en permanence.

Exemples d'utilisation de :in-range et :out-of-range.

Vous constaterez, avec l'exemple ci-dessous, que les pseudo-classes :in-range et :out-of-range s'activent sans qu'il soit nécessaire de valider le formulaire, par exemple en cliquant sur le bouton de validation.

D'autre part, l'absence de saisie est considérée comme correcte, et active :in-range.
(Pour rendre une saisie obligatoire, voir l'attribut required et la pseudo-classe correspondante : ).

Pour la zone de saisie du type date, mois et semaine, vous devrez saisir une date au clavier : les listes déroulantes ne vous permettront pas de saisir une valeur en dehors de la plage autorisée.

Prise en charge de :in-range et :out-of-range.

Les pseudo-classes :in-range et :out-of-range ne posent pas de problème de compatibilité avec les navigateurs actuels.

Colonne 1
Support par les navigateurs des pseudo-classes :in-range et :out-of-range qui cible les contenus de zones de saisie qui sont dans ou en dehors des fourchettes autorisées.
1
Pseudo-classes
:in-range
:out-of-range
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Chrome

Edge

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la pseudo-classe :in-range.

  • Sélecteurs - Niveau 4

    Concernant :in-range. Introduction de la pseudo-classe :in-range dans ce module de spécification.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi...

Les pseudo-classes relatives à l'état des zones de saisie sont listées ci-dessous. Vous pouvez vous reporter à leur description pour plus de détails.

:autofill
Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
⚠
:blank
Pseudo classe désignant les zones de saisie vides.
:checked
Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
⚠
:closed
Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
:default
Pseudo-classe ciblant les cases à cocher et boutons radio qui sont cochés par défaut.
:disabled
Pseudo-classe ciblant les zones de saisie verrouillées (celles qui comportent l'attribut disabled).
:enabled
Pseudo-classe désignant les zones de saisies non verrouillées.
:in-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:indeterminate
Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
:invalid
Pseudo classe désignant les zones de saisie contenant une information invalide.
⚠
:open
Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
:optional
Pseudo élément désignant les zones de saisie non obligatoires.
:out-of-range
Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
:placeholder-shown
Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
:read-only
Pseudo-classe désignant les zones de saisie en lecture seule.
:read-write
Pseudo-classe désignant les zones de saisie en lecture écriture.
:required
Pseudo-classe désignant les zones de saisie obligatoires.
:user-invalid
Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
:user-valid
Pseudo-classe désignant les zones de saisie dont la valeur est valide.
:valid
Pseudo-classe désignant les zones de saisie contenant une information valide.