Obtenir le type d'entrée = texte à ressembler à type = password

tl;dr

J'ai une entrée avec type=text qui je veux montrer les étoiles comme une entrée avec type=password en utilisant uniquement CSS.

Fondamentalement, j'ai un formulaire de la manière suivante:

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

Je ne suis pas de la génération de la forme, je n'ai pas accès à son code HTML. Par contre j'ai accès aux feuilles de style CSS appliqué à la page.

Ce que j'aimerais, c'est de se comporter comme type=password , c'est - à montrer des étoiles pour que l'utilisateur a tapé plutôt que sur le texte tapé. Fondamentalement, je veux que l'aspect (la présentation de la saisie de l'utilisateur) pour ressembler à un type=password champ.

Puisque cela semble être une présentation seule question, je disais qu'il y a un moyen de le faire avec CSS, puisque c'est dans sa responsabilité en ce domaine. Cependant - je n'ai pas trouvé une telle manière. J'ai à l'appui de IE8+, mais je préfère avoir une solution qui fonctionne pour les navigateurs modernes uniquement sur les pas de solution du tout. Des points supplémentaires pour la prévention de copier/coller mais je peux vivre sans.

Remarque: Dans le cas où ce n'était pas clair, je ne peux pas ajouter du code HTML ou JavaScript de la page uniquement CSS.

(Seule chose que j'ai trouvé est cette question mais il ne traite qu'avec jQuery liées problème et a une solution d'activer JavaScript)

source d'informationauteur Benjamin Gruenbaum

  1. 21

    Bien que @ThiefMaster suggéré 

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

    Cependant, cela fonctionne dans les navigateurs webkit descendants.. Opera, Chrome et Safari, mais pas beaucoup de soutien pour le reste, une autre solution pour cela est d'utiliser les polices web.

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

  2. 17

    Vous pouvez créer un police faite que 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;}

    Cela pourrait être ce que vous cherchez...

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

    Comme vous le savez sans doute, il ressemble généralement à ceci:
    Obtenir le type d'entrée = texte à ressembler à type = password

    Donc, vous devez remplacer que par un point/asterisk et de tester ce qui se passe avec les navigateurs...
    parce que je ne suis pas sûr si cela fonctionne sur tous les d'entre eux (certains voudront peut-être utiliser leurs propres glyphes manquant de remplacement). Laissez-moi savoir si vous essayez...

    HTH

  3. 9

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

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

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

    Cependant, ce n'est apparemment non-standard. Au moins la Safari CSS docs dire que c'est une "Extension Apple". Il fonctionne très bien en Chrome - évidemment - mais je ne pense pas que tout autre moteur de rendu prend en charge...

  4. 0

    Cela ne fonctionne que pour text champ (:

    input { -webkit-text-security: none; } 
input { -webkit-text-security: circle; } 
input { -webkit-text-security: square; } 
input { -webkit-text-security: disc; /* Default */ }
  5. -1

    Fondamentalement, vous pouvez faire

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

    à l'intérieur de votre fichier css.

    Mais attentionquelqu'un pourrait simplement "inspecter l'élément" dans Chrome et modifier le css de l'élément de "disque" pour "rien" et le texte réel serait vu clair comme le jour.

    Que pour la désactivation de sélectionner/copier référer à ce post:
    Comment faire pour désactiver la sélection de texte mettant en évidence à l'aide de CSS?

  6. -4

    Si vous voulez éviter de copier coller les fonctionnalités, alors 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 laissera pas les autres de sélectionner le texte et donc ils ne seront pas en mesure de copier.