Les options de mot de passe révélatrices les entrées

HTML fournit des types d'entrée qui gèrent spécifiquement les mots de passe:

<input type="password">

Avec ce type, des points affichés comme floues lors de la saisie:

•••••••••

Il s'agit d'une mesure prise par les pages Web pour améliorer la sécurité. Sans cette fonctionnalité, il est facile pour les autres d'obtenir votre mot de passe en regardant.

Cependant, l'expérience utilisateur s'améliore également et maintenant il y a généralement une option:

☑️ Afficher le mot de passe?

De cette façon, l'utilisateur peut choisir d'afficher le mot de passe. La plupart des utilisateurs peuvent regarder autour de vous avant d'entrer leur mot de passe, confirmer que personne ne regarde, puis choisir d'afficher le mot de passe pour s'assurer qu'ils ont entré correctement le mot de passe et éviter les problèmes causés par la saisie du mauvais mot de passe plusieurs fois.

Alors, comment y parvenir?

Méthode 1: Utilisez JavaScript pour changer type="password" et type="text"

Il s'agit de la méthode la plus couramment utilisée en ce moment car elle fonctionne bien dans tous les navigateurs.

 const input = Document.QuerySelector (". Password-Input");
// Lorsque la case est sélectionnée ...
if (input.getAttribute ("type") === "mot de passe") {
  input.setAttribute ("type", "texte");
} autre {
  input.setAttribute ("type", "mot de passe");
}

Le problème avec cette méthode est qu'il doit implémenter les fonctionnalités d'affichage / masquer le mot de passe en modifiant le type d'entrée, ce qui semble un peu étrange. Plus important encore, il peut entrer en conflit avec l'outil de gestion de mot de passe. La modification du type d'entrée peut entraîner le gestionnaire de mot de passe (y compris le gestionnaire de mots de passe intégré du navigateur) ou remplir automatiquement le mot de passe.

Méthode 2: Utiliser -webkit-text-security dans CSS

Ce n'est pas une solution viable, car cette propriété n'est valable que dans certains navigateurs. Mais il est évident que quelqu'un voulait une fois migrer cette fonctionnalité dans CSS car cela fonctionne dans certains navigateurs.

 entrée [type = "mot de passe"] {
  -Webkit-Text-Security: Square;
}
form.show-passwords entrée [type = "mot de passe"] {
  -Webkit-Text-Security: Aucun;
}

Méthode 3: Utilisez input-security dans CSS

Il existe actuellement un projet de spécification éditoriale pour input-security . Il s'agit essentiellement d'une valeur de bascule.

 form.show-passwords entrée [type = "mot de passe"] {
  Sécurité d'entrée: aucun;
}

Cette méthode est concise et claire. Mais aucun navigateur ne le prend encore en charge. Par conséquent, nous ne pouvons utiliser que la méthode 1 à l'heure actuelle.

Démo (toutes les méthodes)

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!