Comment transformer un champ de saisie de texte en champ de mot de passe en utilisant uniquement CSS ?

Comment faire ressembler un champ de saisie à un champ de mot de passe avec uniquement du CSS

En développement web, il est parfois nécessaire d'afficher un texte champ de saisie comme champ de mot de passe avec des caractères masqués, garantissant la confidentialité de l'utilisateur. Ceci peut être réalisé entièrement via CSS, même sans modifier le code HTML ou utiliser JavaScript.

Solution CSS :

Pour transformer un champ de saisie de texte en un champ de type mot de passe , CSS fournit un sélecteur expérimental appelé -webkit-text-security (ou text-security). Ce sélecteur contrôle l'apparence visuelle des champs de saisie et peut être utilisé pour définir la sécurité d'affichage pour la saisie de texte.

Mise en œuvre :

Pour utiliser cette solution, appliquez le - webkit-text-security ou text-security selector sur le champ de saisie souhaité et définissez la valeur sur disque ou sur un autre caractère souhaité. Voici un exemple :

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

Utilisation :

Pour basculer l'affichage entre un champ de texte et un champ de mot de passe, vous pouvez ajouter un bouton au formulaire et utiliser JavaScript pour ajoutez ou supprimez la classe pw du champ de saisie.

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

Compatibilité avec les navigateurs :

Le sélecteur -webkit-text-security est pris en charge dans les navigateurs modernes tels que Chrome, Safari et Opéra. Pour la prise en charge d'IE8, vous pouvez utiliser le sélecteur de sécurité de texte.

Remarques supplémentaires :

Cette solution affecte principalement la présentation visuelle et n'empêche pas la fonctionnalité copier/coller en défaut. Cependant, vous pouvez implémenter des mesures supplémentaires en CSS ou JavaScript pour restreindre le copier-coller à partir du champ de saisie.

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!