Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-10-31 12:24:02
original
622 Les gens l'ont consulté

How to Transform a Text Input Field into a Password Field Using Only 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!