HTMLElement : propriété inert
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2023.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété inert de HTMLElement reflète la valeur de l'attribut inert de l'élément. Il s'agit d'une valeur booléenne qui, lorsqu'elle est présente, fait en sorte que le navigateur « ignore » les évènements de saisie utilisateur pour l'élément, y compris les évènements de sélection et ceux des technologies d'assistance. Le navigateur peut aussi ignorer la recherche dans la page et la sélection de texte dans l'élément. Cela peut être utile lors de la création d'interfaces utilisateur comme des modales où l'on souhaite « piéger » la sélection à l'intérieur de la modale lorsqu'elle est visible.
Notez que si l'attribut inert n'est pas défini, l'élément peut tout de même hériter de l'inertie de son parent. Cependant, cette inertie héritée n'est pas reflétée par la valeur de cette propriété. Définir explicitement la propriété à false ne peut pas annuler l'inertie héritée du parent.
Valeur
Un booléen qui vaut true si l'élément est inerte ; sinon, la valeur est false.
Exemples
HTML
<div>
<label for="button1">Bouton 1</label>
<button id="button1">Je ne suis pas inerte</button>
</div>
<div inert>
<label for="button2">Bouton 2</label>
<button id="button2">Je suis inerte</button>
</div>
CSS
[inert] > * {
opacity: 0.5;
}
Note : Cet attribut, à lui seul, ne provoque aucun changement visuel du contenu tel qu'il est affiché dans le navigateur. Dans l'exemple ci-dessus, du CSS a été appliqué pour que tout descendant direct d'un élément avec l'attribut inert soit affiché semi-opaque.
Spécifications
| Specification |
|---|
| HTML # dom-inert |
Compatibilité des navigateurs
Voir aussi
- L'attribut universel :
inert - La propriété
disabled - L'élément HTML
<dialog> - La propriété CSS
interactivity