web-dev-qa-db-fra.com

Modification des symboles affichés dans un champ de mot de passe HTML

Est-il possible de changer les astérisques (*) ou, dans certains navigateurs, une puce (•) qui apparaît dans les champs de mot de passe en HTML?

htmlinputpasswords
29
Jimvanz

Vous ne pouvez pas modifier le caractère de masquage du mot de passe dans le champ du mot de passe standard. Vous pouvez le simuler avec une zone de texte, mais cela crée un modèle de sécurité faible, car vous n'obtenez pas la protection que vous accordez à partir de la zone de texte du mot de passe. En passant, il est généralement déconseillé de modifier le comportement de tels éléments, car les utilisateurs sont habitués à une forme de masquage et vous en introduirez une autre - s'il n'y a pas de bonne raison de le faire, je d l'éviter.

30
Pete OHanlon

Créez votre propre police et utilisez @font-face et font-family (et font-size) pour input[type="password"]. Cela devrait aider à résoudre votre problème. Mais ... vous devez créer une police avec un caractère de puce et un astérisque remplacé. Tous les numéros de caractère de la police peuvent représenter le même caractère. Utilisez google pour trouver un programme gratuit pour éditer les polices vectorielles.

Ne dites jamais "c'est impossible". Vous devriez trouver un hack pour votre problème. 

Caractères à remplacer par votre symbole (pour Chrome, Firefox et MSIE): 26AB, 25E6, 25CF, 25D8, ​​25D9, 2219, 2019, 2022, 2024, 00B7, 002A.

(18 e s.)

26
18C

Non - l'agent utilisateur choisit son propre style par défaut et, à ma connaissance, aucun attribut CSS ne peut être modifié pour déterminer le caractère de masquage.

Bien sûr, cela serait possible si le champ de mot de passe était simplement un champ de texte standard et que vous masquiez manuellement l'entrée avec un gestionnaire d'événements javascript (probablement onKeyPress). Vous pouvez même déclarer le champ en tant que type="password" dans le code HTML, puis demander à votre fonction JS de modifier le DOM pour en changer le type. Je serais cependant un peu méfiant à l'idée de faire cela. la mise en œuvre du navigateur est presque certainement solide, et il est rarement judicieux de contourner les fonctionnalités de sécurité établies pour vous en servir.

4
Andrzej Doyle

Il semble dès maintenant que cela soit possible dans les navigateurs Webkit. Veuillez consulter http://help.dottoro.com/lcbkewgt.php pour des exemples et de la documentation.

Ne s'applique pas à la saisie du mot de passe

<input type="text" style="-webkit-text-security: square;" />

Il n'y a pas de bonne solution pour les autres navigateurs au moment où cette réponse a été écrite et même dans les navigateurs Webkit, les caractères que vous êtes autorisé à spécifier sont très limités.

4
www139

<input type="text" style="-webkit-text-security: circle;" />

3
Joseph Eduardo Mejia Laos

Je sais que la question est très ancienne, mais j’ai fait face au problème aujourd’hui et je l’ai résolu en utilisant cette approche: https://github.com/Mottie/input-password-bullet

Fondamentalement, j'ai créé une nouvelle police où attribuer le point par défaut, à une autre icône. Ensuite, il suffit d’importer les fichiers de polices dans le projet et d’ajouter un css semblable à celui-ci:

@font-face {
    font-family: 'fontello';
    src: url('/fonts/fontello.eot');
    src: url('/fonts/fontello.eot') format('embedded-opentype'),
    url('/fonts/fontello.woff') format('woff'),
    url('/fonts/fontello.ttf') format('truetype'),
    url('/fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

input[type="password"] {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    color: red;
    font-size: 16px;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

    /* add spacing to better separate each image */
    letter-spacing: 2px;
}

J'espère que cela t'aides!

0
Isaac Bosca