Je veux créer un mot de passe sur le terrain avec un masque: « _ _ _ _ », Comment appliquer un masque pour entrer le mot de passe en HTML?
Avec espace réservé attribut le contenu de champ (« _ _ _ _ ») est effacé après le premier chiffre est entré.
mais j'ai besoin quand je tape premier chiffre le champ devient "_ _ " chiffres seconde -> " _" et ainsi de suite
Toute idée avec jquery ou HTML5?
Thnaks à l'avance
I ce code vous aidera à votre problème, seulement u devez définir votre propre boniment, comme pour l'exemple que j'ai donné le modèle que le caractère/numérique/caractère numérique/caractère/numérique .
input {
font-family: monospace;
}
label {
display: block;
}
div {
margin: 0 0 1rem 0;
}
.shell {
position: relative;
line-height: 1; }
.shell span {
position: absolute;
left: 3px;
top: 1px;
color: #ccc;
pointer-events: none;
z-index: -1; }
.shell span i {
font-style: normal;
/* any of these 3 will work */
color: transparent;
opacity: 0;
visibility: hidden; }
input.masked,
.shell span {
font-size: 16px;
font-family: monospace;
padding-right: 10px;
background-color: transparent;
text-transform: uppercase; } input {
font-family: monospace;
}
label {
display: block;
}
div {
margin: 0 0 1rem 0;
}
.shell {
position: relative;
line-height: 1; }
.shell span {
position: absolute;
left: 3px;
top: 1px;
color: #ccc;
pointer-events: none;
z-index: -1; }
.shell span i {
font-style: normal;
/* any of these 3 will work */
color: transparent;
opacity: 0;
visibility: hidden; }
input.masked,
.shell span {
font-size: 16px;
font-family: monospace;
padding-right: 10px;
background-color: transparent;
text-transform: uppercase; }<form action="">
<div>
<label for="czc"> Zip Code</label>
<input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked"
data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca"
title="6-character alphanumeric zip code in the format of A1A 1A1" />
</div>
</form>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>
Regardez google, il a beaucoup de réponses ... http://www.jasny.net/bootstrap/javascript/#inputmask – Roy
Bien sûr, dans ce cas, vous ne pouvez pas utiliser l'attribut placeholder évidemment. Au lieu de cela, vous remplissez la chaîne '_ _ _ _' en tant que valeur du champ de saisie et implémentez un gestionnaire d'événements réagissant aux événements clés à l'intérieur de l'élément d'entrée. Cela vous permet de modifier le contenu comme vous le souhaitez. – arkascha