Il primo numero viene inserito quando si digita l'ultimo numero nella casella di testo

Quando scrivo l' ultimo numero , il primo numero va dentro text-box(scompare), aggiunge uno spazio extra.

Dopo aver fatto clic all'esterno text-box, sembra che sia necessario durante la digitazione dell'ultimo carattere.

  #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" >

Aiutami a uscire da questo problema. Grazie

Aggiungi spazio per un altro numero e taglia l'ingresso usando clip-path

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom/100% 1px no-repeat;
  width: 260px;
  clip-path:polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 100%, 0 100%);
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

O senza tracciato di ritaglio riducendo la dimensione dello sfondo:

#number_text {
  padding-left: 9px;
  letter-spacing: 31px;
  border: 0;
  background: 
    repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
    bottom left/calc(100% - 38px) 1px no-repeat;
  width: 260px;
  box-sizing: border-box;
  outline: none;
}

<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">

Usa questo codice è ben fatto

var container = document.getElementsByClassName("wrap")[0];
    container.onkeyup = function(e) {
        var target = e.srcElement;
        var maxLength = parseInt(target.attributes["maxlength"].value, 6);
        var myLength = target.value.length;
        if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                    break;
                if (next.tagName.toLowerCase() == "input") {
                    next.focus();
                    break;
                }
            }
        }
     else if (myLength <= maxLength)
      {
        prev=target.previousElementSibling;
         while (prev = prev) {
            if (prev == null)
                break;
            if (prev.tagName.toLowerCase() == "input") {
                prev.focus();
                break;
            }
        }
      }

    }

.wrap input {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #000;
            width: 3%;
            display: inline-block;
            outline: 0;
            text-align: center;
        }

<div class="wrap">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
    </div>

Prova ad aggiungere questo script sotto il campo di input:

<script>
  var oInput = document.getElementById('number_text');
  oInput.onkeypress = function(ev) {
    setTimeout(function() {
        if( oInput.value.length > 5 ) {
            oInput.setSelectionRange(0,0);
            oInput.blur();
        }
    }, 0);
  }
</script>

Questo forza il cursore di input all'inizio dell'input dopo l'inserimento del sesto carattere. Ho anche aggiunto una sfocatura () al campo in modo che il salto del cursore all'inizio non sporga.

È necessario anche il timeout. Senza di essa il carattere inserito verrà inserito all'inizio. Altre informazioni sul timeout: setTimeout è una buona soluzione per eseguire funzioni asincrone con JavaScript?

Puoi gestirlo aggiungendo un evento blur () di js onkeyup della casella di input:

myFunction=()=>{
if(document.getElementById("number_text").value.length===6)
document.getElementById("number_text").blur();
}

 #number_text {
        padding-left: 9px;
        letter-spacing: 31px;
        border: 0;
        background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%);
        background-position: left bottom;
        background-size: 38px 1px;
        background-repeat: repeat-x;
        width: 220px;
        box-sizing: border-box;
        outline:none;
        overflow-y:hidden;
        overflow-x:hidden;
    }

<input type="text" id="number_text" maxlength="6"  pattern="\d{6}" value="1234" onkeyup="myFunction()" >
<br/>

Si prega di cambiare su CSS di seguito (funzionerà)

padding-left: 14px;

per

padding-left: 5px;

Quindi mi piace la risposta di Temani Afif sull'uso della maschera di ritaglio. Penso che sia fantastico. Volevo proporre un'altra soluzione (un po 'meno elegante). Ho usato Firefox per testare anche questo problema e facendo clic al di fuori dell'area di testo (perdendo lo stato attivo) non riappare la prima cifra o la stringa torna alla normalità nel testo inserito lì.

Credo che il problema sia l'attributo css di spaziatura tra lettere che hai impostato:letter-spacing: 31px; e il fatto che credo si applicherebbe al cursore "lampeggiante" che la maggior parte dei browser ha. Usando Chrome, sembra rimuoverlo quando perde lo stato attivo, mentre Firefox lo mantiene anche dopo aver perso lo stato attivo.

La prima soluzione consisteva nell'utilizzare manualmente la funzione di sfocatura () per far perdere la messa a fuoco dell'ingresso. Funziona in Chrome (usando una funzione anonima auto-eseguita):

<input type="text" id="number_text" maxlength="6" onkeyup="(function()
    {
      var x = document.getElementById('number_text');
      let value = x.value
      if (value.length >= 6){
        x.blur()
        return false
      }
    })();"
 pattern="\d{6}" value="1234" >

o anche come una Funzione definita chiamata dall'input number_text in questo modo:

<script>
 handleMaxInput = function(){
  var x = document.getElementById('number_text');
  let value = x.value
  if (value.length >= 6){
    x.blur()
    return false
  }
};
</script>

<input ... id='number_text' ... onkeyup="handleMaxInput()" ... >

Noterai un leggero ritardo in Chrome, ma chiamare questo in Firefox non risolverà il problema.

Possiamo essenzialmente forzare questo stesso comportamento in Firefox. Dopo aver giocato un po ', ho pensato che Chrome stesse rinfrescando / ricalcolando la spaziatura delle lettere su una sfocatura. La mia sessione di gioco ha mostrato che potresti forzare Firefox a ricalcolare questo valore a livello di codice:

1. Cambia lo stile incorporato dell'attributo di spaziatura tra lettere in un valore diverso (poiché non possiamo modificare una classe CSS di number_text a livello di codice senza troppi sforzi, come riscrivere l'intero tag di stile nella sezione di stile di un documento).
2. Rimuovere la classe number_text dall'input.
   • 1 e 2 sono intercambiabili, è necessario che Firefox esegua il fallback solo allo stile inline impostato, senza che gli attributi della classe vengano salvati "in memoria".
3. Rimuovi lo stile inline e riapplica la classe CSS number_text. Ciò costringerà il browser a ricalcolare la separazione delle lettere nel momento in cui ne abbiamo bisogno.

Nel codice, sembrerebbe la seguente funzione JavaScript:

handleMaxInput = function(){
        var x = document.getElementById('number_text');
        let value = x.value
        if (value.length >= 6){ // if the input is 6 or more characters
              x.classList.remove('number_text') // remove the class
              x.style.letterSpacing = '0px' // reset the spacing
              setTimeout(function() { // set time to let browser refresh updates
                  x.classList.add('number_text') // Re-add class after browser refresh
                  setTimeout(function() { // Remove inline-style after more reculculations
                      x.style.removeProperty('letter-spacing') // Remove inline style to let class styles apply
                      x.blur // optional, will force input field to lose focus. Else comment out to avoid that.
              }, (1)); // waits 1 millisecond
          }, (1)); // waits 1 millisecond
        }
    }

Avrà lo stesso sfarfallio in Firefox come con Chrome, e tutto andrà bene.

Nota : le funzioni di timeout consentono di aggiornare il browser e di aggiornare effettivamente ciò di cui abbiamo bisogno.

Nota : è possibile scegliere di chiamare .blur () nella funzione per fare in modo che la casella di testo perda lo stato attivo, oppure ometterlo e rimarranno nel campo di input senza l'errore con le cifre.

Spero che questo aiuti la tua comprensione concettuale, oltre a risolvere il problema. Alcune altre persone hanno dato buone soluzioni che evitano tutto lo sfarfallio e funzionano sia in Firefox che in Chrome!

Sembra un problema di interfaccia utente comune che ho riscontrato prima.

Scommetto che fallisce anche su alcune piattaforme (questa è la natura di questo particolare bug.)

Su alcune piattaforme, ma non su tutte, viene utilizzato un carattere di spaziatura per indicare il punto di inserimento.

Su alcune piattaforme, ma non su tutte, questo personaggio non ha spaziatura, ma si sovrappone al prossimo, non all'ultimo, personaggio. Quindi, se non vi è alcun personaggio successivo, verrà riempito con lo spazio fino a quando non viene immesso.

In entrambi questi casi il display agirà in questo modo.

Questo è un caso in cui la soluzione migliore è la soluzione più semplice, adatta a questa stranezza di sistema comune, non la soluzione che la costringe a comportarsi come si desidera, come suggerito da alcune persone. Questo ha meno probabilità di introdurre bug e ha maggiori probabilità di funzionare su tutte le piattaforme.

La soluzione è dare un po 'di spazio libero alla fine della voce per visualizzare questo.

Aumenta la " larghezza " a 230 o 240 e dovresti essere bravo.

Inoltre, potresti persino meglio ospitare sistemi non standard, in particolare sistemi di accessibilità con caratteri o attributi di dimensione alternativi, semplicemente rilevando la larghezza inserendo spazi a larghezza intera nell'area, aggiungendo uno spazio di un quarto di larghezza alla fine, misurandoli, quindi eliminando o semplicemente truccandolo per sovrascrivere gli spazi a larghezza intera mentre l'utente digita (o altrimenti inserisce i dati, non presumere che sia una tastiera o addirittura qualcosa che inserisce un carattere alla volta).