Get input type=text ressembler type=mot de passe

tl; dr

j'ai une entrée avec type=text que je veux montrer des étoiles comme une entrée avec type=password en utilisant seulement CSS.

fondamentalement, j'ai un formulaire avec la saisie suivante: 

<input type='text' value='hello' id='cake' />

Je ne génère pas le formulaire, Je n'ai pas accès à son HTML du tout. Par contre j'ai accès aux feuilles de style CSS appliqué à la page.

ce que j'aimerais c'est qu'il se comporte comme type=password , c'est - à montrer des étoiles pour que l'utilisateur a tapé plutôt que sur le texte tapé. En gros, je voudrais que cet aspect (la présentation des entrées de l'utilisateur) ressemble à un champ type=password .

comme cela semble être un problème de présentation seulement, j'ai pensé qu'il doit y avoir un moyen de le faire avec CSS puisque c'est dans son domaine de responsabilité. Cependant - je n'ai pas trouvé une telle manière. Je dois soutenir IE8+ mais je préfère avoir une solution qui fonctionne pour les navigateurs seulement sur aucune solution du tout. Des points supplémentaires pour empêcher la fonctionnalité copier / coller, mais je peux vivre sans cela.

Note: dans le cas où ce n'était pas clair, Je ne peux pas ajouter HTML ou JavaScript à la page seulement CSS.

(la seule chose que j'ai trouvé est cette question mais il s'agit d'une question liée à jQuery et il a une solution JavaScript)

17
demandé sur Community 2013-07-21 09:36:41

6 réponses

ainsi que @ThiefMaster a suggéré 

input.pw {
    -webkit-text-security: disc;
}

cependant, cela fonctionnera dans les navigateurs qui sont des descendants de webkit.. Opera, Chrome et Safari, mais pas beaucoup de soutien pour le reste, une autre solution à cela est d'utiliser webfonts.

utilisez n'importe quel utilitaire d'édition de police comme FontForge pour créer une police avec tous les caractères à être * ( ou n'importe quel symbole que vous voulez ). Ensuite, utilisez les polices CSS web pour les utiliser comme police personnalisée.

23
répondu ShrekOverflow 2016-11-22 15:27:20

vous pouvez créer une police faite uniquement de points 

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

c'est peut-être ce que vous cherchez...

il y a beaucoup de glyphes à définir, mais il pourrait y avoir une façon plus simple de le faire.. Vous pouvez créer une police totalement vide et définir seulement le .notdef glyphe ( glyphe ID 0 ) qui est utilisé comme un remplacement quand un autre glyphe n'est pas défini

Comme vous le savez probablement, il ressemble généralement à ceci: missing glyph icons

si, vous devriez remplacer cela par un point/astérisque et de tester ce qui se passe avec les navigateurs... parce que je ne suis pas sûr que cela fonctionne sur chacun d'eux (certains peuvent vouloir utiliser leur propre remplacement de glyphe manquant). Laissez-moi savoir si vous essayez...

HTH

18
répondu 2013-07-21 09:20:33

dans les navigateurs WebKit, vous pouvez le faire en utilisant la propriété -webkit-text-security . Il permet même de sélectionner la forme des balles (disque, cercle, carré). 

input.pw {
    -webkit-text-security: disc;
}

Démo: http://jsfiddle.net/ThiefMaster/6uJJw/1 /

cependant, ce n'est apparemment pas la norme. Au moins le Safari CSS docs dire que c'est une"Apple Extension". Il fonctionne bien dans le Chrome-évidemment - mais je ne pense pas un autre moteur de rendu le supporte...

9
répondu ThiefMaster 2013-07-21 05:40:09

cela ne fonctionne que pour le champ text (: 

input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; } 
input { -webkit-text-security: disc; /* Default */ }
0
répondu Walk 2017-09-22 06:19:38

fondamentalement, vous pouvez faire

input { -webkit-text-security: disc; }

dans votre fichier css.

mais attention , quelqu'un pourrait simplement " inspecter l'élément "dans Chrome et changer l'élément css de" disque "à" aucun " et le texte réel serait vu clair comme le jour.

Comme pour la désactivation de sélectionner/copier référer à ce post: comment désactiver la mise en surbrillance de la sélection de texte en utilisant CSS?

-1
répondu Sicha 2017-05-23 12:03:01

si vous voulez empêcher la fonctionnalité Copier Coller, vous pouvez utiliser:

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: moz-none; -ms-user-select: none; user-select: none;

qui ne permettra pas aux autres de sélectionner le texte et donc ils ne pourront pas copier.

-4
répondu aniruddha 2013-07-21 05:53:33