type - Styling password di inserimento in HTML




w3 css layout (4)

Aggiornare

  • Aggiunto un <input type='number'> che può regolare la font-size: 8px root font-size: 8px a 84px .

Punti rilevanti

  • L'input è spogliato di bordo, contorno e sfondo.
  • Avvolto un'etichetta attorno all'input come overlay (tecnicamente si tratta di un underlay? z-index: -1 ) che ha una pseudo-classe ::after il valore del content di 6 caratteri di sottolineatura.
  • Sia l'input che l'overlay devono avere le seguenti proprietà:

    /* The values can anything as long as it is valid and are the same */
    letter-spacing: 10px;
    font-size: 1.2rem;
    font-weight: 900;
  • L'overlay è display: table e l'input è display: table-cell . Questo (insieme al posizionamento absolute e relative ) mantiene l'input rigidamente centrato nella sovrapposizione.

  • vengono utilizzate unità rem , quindi se si desidera ridimensionare la dimensione del font-size alto o in basso, basta cambiare la font-size del carattere del tag <html> e tutto si aggiusta di conseguenza:

    /* Change the 16px to whatever you want and everything scale to that value */
    html, 
    body {
      font: 400 16px/1.5 Consolas
    }

dimostrazione

Nota: prova a tenere premuto un tasto continuamente, e vedrai che non ci sono cambiamenti.

var node = document.querySelector('#fSz');
node.oninput = setFontSize;

function setFontSize(e) {
  var tgt = e.target;
  var root = document.documentElement;
  root.style.setProperty(`--${tgt.id}`, `${tgt.valueAsNumber}px`);
}
:root {
  --fSz: 16px;
}

html,
body {
  font-size: var(--fSz);
  font-weight: 400;
  line-height: 1.5;
  font-family: Consolas, 'sans serif', monospace;
}

fieldset {
  position: relative;
  display: table;
  min-height: 5.5rem;
  padding: 0 0 0 0.3125rem;
  margin-top: 2em;
  overflow: visible;
}

fieldset * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

legend {
  font-size: 1.2rem;
}

.overlay {
  display: table;
  position: relative;
  top: 0.3125rem;
  left: 0.9375rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.overlay::after {
  content: '\ff3f\ff3f\ff3f\ff3f\ff3f\ff3f';
  font-size: 1.2rem;
  letter-spacing: 0.78rem;
}

@-moz-document url-prefix() {
  .overlay::after {
    content: '\2501\2501\2501\2501\2501\2501';
    text-shadow: 0.65rem 0px 0px #222;
    font-size: 1.37rem;
    letter-spacing: 1.2rem;
    line-height: 2;
  }
}

.hint {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0.625rem;
  font-style: italic;
  font-size: 0.75rem;
}

#password-input {
  display: table-cell;
  border: 0px none transparent;
  outline: 0px none transparent;
  background: transparent;
  position: absolute;
  left: 0px;
  z-index: 1;
  overflow: hidden;
  line-height: 2;
  transform: translate(0.25rem, -1rem);
  letter-spacing: 1.25rem;
  font-size: 1.35rem;
  font-weight: 900;
}

sup {
  padding-top: 0.25rem;
  font-size: 0.65rem
}

.fc {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  font: 400 16px/1.5 Consolas;
  width: 50%;
}

#fSz {
  display: inline-block;
  padding-left: 8px;
  width: 52px;
  font: inherit;
  text-align: center;
}
<label for='fSz' class='fc'>Font-Size: 
  <input id='fSz' type='number' min='8' max='84' value='16' step='0.5'>&nbsp;px
  </label>

<fieldset>
  <legend>Enter New Pin</legend>
  <label for='chk' class='overlay'>
     <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="19" value="123456" placeholder='123456'>
     </label>
  <label for="password-input" class="hint"><sup>&#128956;</sup>New pin must be 6 digit number only</label>

</fieldset>

Ho una password del tipo di input che consente solo un numero di sei cifre come questo:

<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
  maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>

Si mostrerà così:

Come posso modificarlo in modo che assomigli al seguente?


È possibile posizionare un elemento contenente "la maschera" dietro l'input e impostare il colore di sfondo dell'input su trasparente. Ma fai attenzione ai seguenti dettagli:

  • Utilizzare la famiglia di caratteri monospace in modo che la larghezza di _ e sia sempre la stessa.
  • Terminare l'elenco dei caratteri con il monospace modo che il sistema operativo possa scegliere un font a larghezza fissa se tutti i font specificati non sono disponibili.
  • L'agente utente può scegliere una famiglia di caratteri, dimensioni e altezza della linea diversi per gli elementi di input. Può anche scegliere un'altezza e una linea diversa per i font monospace (ad esempio medium dimensione medium può essere calcolata come 13px invece del solito 16px e normal altezza normal linea è spesso ridotta di 1px per due font diversi con le stesse dimensioni). Quindi assicurati di specificare queste proprietà in modo esplicito.

Ecco il risultato:

body {
  font-family: sans-serif;
}

fieldset label,
fieldset span {
  display: block;
  margin: .5em 0;
}

fieldset .input-wrapper {
  /* positioning */
  position: relative;
  /* font */
  font: 16px/1.5 monospace;
  letter-spacing: .5em;
  /* optional */
  background-color: #EEE;
}

fieldset .input-wrapper::before {
  /* positioning */
  position: absolute;
  /* masking */
  content: "______";
}

fieldset input {
  /* positioning */
  position: relative;
  /* font */
  font: inherit;
  letter-spacing: inherit;
  /* masking */
  background-color: transparent;
  /* reset */
  margin: 0;
  border: 0;
  padding: 0;
}
<fieldset>
  <label for="password-input">Enter New Pin</label>
  <div class="input-wrapper">
    <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" value="">
  </div>
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>


Prova questo:

input {
  padding-left: 15px;
  letter-spacing: 39px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 3px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 280px;
  font-size: 30px;
}

input:focus {
  outline: none;
}
<fieldset>
  <label for="password-input">Enter New Pin</label>
  <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" maxlength="6" size="6" value="">
  <span class="hint">New pin must be 6 digit number only</span>
</fieldset>


Questa soluzione convenzionale può essere d'aiuto per il cross browser:

Il modulo HTML:

<p class="text-center">Enter new pins</p>
     <form role="form" method="post">
        <div class="form-group text-center">

                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >
                <input class="inputbox"  maxlength="1" type="password" >

                <small class="text-danger">New pin must be 6 digit number only</small>      
            </div>

        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg btn-block">Verify Pin
            </button>
        </div>
        <input id="code_hidden" maxlength="6" name="real_code" type="text" >
    </form>

Possiamo vedere il risultato su input name = real_code. Deve essere type = 'hidden' sulla produzione. Cambia questa lunghezza massima quando è richiesto più campo.

Stile CSS:

<style>
.inputbox {
    background-color: #fff;
    border: none;
    border-bottom: thin solid gray;
    width: 20px;
    font-size: 24px;
    margin-bottom: 20px;
    margin-right: 5px;
}
</style>

Script parte:

<script>
    $(function() {

    $(".inputbox").keyup(function () { 

        $(this).next('.inputbox').focus();

        var value = [];

        $('.inputbox').each(function() {
          value += $(this).val();  
        }); 

         $('#code_hidden').val(value); 
        });
    });

    </script>




input