CSS peut-il détecter la saisie de texte dans des pages externes sans JavaScript ?

Détection de la saisie de texte à l'aide de CSS dans des pages externes incontrôlables

Afin de déterminer si un champ de saisie contient ou non du texte uniquement via CSS, considérez en utilisant un attribut d'espace réservé. Bien que l'espace réservé soit nécessaire et ne puisse pas être vide, il peut être défini sur un seul espace.

Application de la règle CSS :

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

Démonstration :

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

Dans cet exemple, l'entrée avec un espace réservé et aucun texte aura une bordure verte, indiquant qu'elle est vide. À l'inverse, l'entrée avec un espace réservé et du texte, ou avec un espace réservé et une valeur uniquement, aura une bordure rouge.

Notes supplémentaires :

• Cette méthode fonctionne car :placeholder-shown est une pseudo-classe qui correspond aux éléments qui affichent un espace réservé.
• :placeholder-shown est pris en charge dans tous principaux navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!