Changer les symboles affichés dans une page HTML champ de mot de passe

Est-il possible de modifier la forme d'astérisques (*), ou dans certains navigateurs, une balle (•), qui s'affiche dans les champs de mot de passe en HTML?

InformationsquelleAutor Jimvanz | 2009-10-30
  1. 36

    Vous ne pouvez pas modifier le mot de passe de caractère de masquage dans la norme champ mot de passe. Vous pouvez faire semblant avec une zone de texte, mais c'est une faiblesse du modèle de sécurité, car vous n'avez pas obtenir la protection de la zone mot de passe. Comme une note de côté, il n'est généralement pas une bonne idée de changer le comportement des éléments comme ça parce que les utilisateurs sont habitués à un mode de masquage, et vous serez en introduisant un autre - si il n'y a pas de bonne raison de le faire, je préfère l'éviter.

    InformationsquelleAutor Pete OHanlon
  2. 33

    Créer votre propre police et l'utiliser @font-face et font-family (et font-size) pour input[type="password"]. Il devrait aider à résoudre votre problème. Mais... vous devez créer de la police de l'remplacé balle et de l'astérisque. Tous les caractères dans la police peuvent représenter le même personnage. Utiliser google pour trouver de programme gratuit pour modifier les polices de vecteur.

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

    Caractères pour être remplacé par le symbole (pour Chrome, Firefox et MSIE):
    26AB, 25E6, 25CF, 25D8, 25D9, 2219, 20F0, EN 2022, 2024, 00B7, 002A.

    (18C)

    • Avez-vous un exemple de la police à partager?
    • cela devrait être la réponse parfaite... Merci man... résolu mon problème
    • Femme pas homme... les Gens sont rarement penser abstrait et multi-niveaux de comportement. BTW. la question est ancienne (2009), mais toujours actif. Dans le passé, le @font-face n'a pas été défini. En 2009, il n'était pas possible mais... les gens de répéter la réponse malgré le fait que Firefox prend en charge à partir de la v3.5, c'est à dire probablement à partir de la v6, google Chrome à partir de v4. Mais encore... Opera Mini ne prend pas en charge. Quand j'ai écrit ma réponse, la principale réponse a +21 points.
    • Hey Ms, le sexe ne peut pas être deviné par votre identifiant 18c.À l'aide de la balance des probabilités, j'ai dit "l'homme"... Désolé.. de toute façon, merci pour l'explication.. 🙂
    • ensuite, utilisez universel et naturel "vous". C'est OK dans la langue anglaise.
    • ok :))))))
    • Cela semble vraiment bonne, Peut-on s'il vous plaît partager un possible tutoriel de référence pour cette!
    • Il est nécessaire que @font-face etc. dans le CSS (lire à ce sujet), de la police de forge de la demande d'édition/création de polices de caractères. Dans la police-forge vous pouvez copier (Ctrl+C) caractères à remplacer (Ctrl+V). Vous pouvez également fournir votre propre masque de caractère. Si editinf polices, utilisez des polices de caractères sous licence MIT (par exemple la Libération). Ne modifiez pas l'Helvetica ou Arial (en raison de problèmes de licence).

    InformationsquelleAutor 18C
  3. 4

    Pas - l'agent de l'utilisateur choisit son propre style par défaut, et il n'y a (à ma connaissance) aucun des attributs CSS, vous pouvez modifier afin de déterminer le caractère de masquage.

    Bien sur, ce ne sera possible que si le champ mot de passe est juste un champ de texte standard, et vous masquée manuellement l'entrée avec un gestionnaire d'événement javascript (onKeyPress, sans doute). Vous pouvez même déclarer le terrain comme type="password" dans le code HTML, puis avoir votre JS fonction de modifier le DOM pour changer son type. Je serais un peu méfiant à ce sujet, cependant; le navigateur de mise en œuvre est presque certainement assez solide, et le contournement de sécurité mis en place la fonctionnalité de rouler votre propre est rarement une bonne idée.

    • De sécurité en place de la fonctionnalité? Mot de passe et les champs de saisie de texte en HTML sont sur le même, juste le changement de l'INTERFACE, avec le ruban passe dans les champs de mot de passe. Je ne suis pas downvoting votre réponse, mais ce n'est pas comme réinventer la roue ou de la création d'un homebrew moteur de cryptage, c'est juste en bidouillant un élément de l'INTERFACE utilisateur de votre répondent à vos goûts.
    • en plus de caractère, de masquage des champs de mot de passe aussi empêcher la copie du contenu de leur part, en fonction du navigateur et du système d'exploitation.
    • Merci de souligner ce point. De toute façon, même si l'utilisateur a essayé de copier à partir de la zone de texte personnalisé, tout ce qu'il obtiendrait serait asteriscs ou des points ou de tout autre symbole que vous choisissez de masquer le mot de passe réel.
    InformationsquelleAutor Andrzej Doyle
  4. 4

    Comme de maintenant, il semble que cela est possible dans les navigateurs webkit. Veuillez voir http://help.dottoro.com/lcbkewgt.php pour des exemples et de la documentation.

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

    HTML:

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

    Il n'y a pas de bonne solution pour les autres navigateurs tel que lorsque cette réponse a été écrite et même dans les navigateurs webkit, les caractères sont autorisés à spécifier sont très limitées.

    • Cela ne fonctionne pas. Je l'ai testé sur 4 navigateurs différents.
    • Mis à jour. Merci @OleHaugset .
    InformationsquelleAutor www139
  5. 3

    HTML:

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

    • La propriété CSS -webkit-text-security ne fonctionne pas sur IE, Firefox ou Opera.
    InformationsquelleAutor Joseph Eduardo Mejia Laos
  6. 2

    Je sais que c'est une très vieille question, mais j'ai été confronté à ce problème aujourd'hui, et je l'ai résolu en utilisant cette approche: https://github.com/Mottie/input-password-bullet

    En gros, j'ai créé une nouvelle police où assigner par défaut le point, à une autre icône. Ensuite, suffit d'importer les fichiers de police pour le projet et ajouter un css similaire à ceci:

    CSS:

    @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;
}

    Espérons que cette aide!

    InformationsquelleAutor Isaac Bosca