Die erste Nummer wird eingegeben, wenn die letzte Nummer in das Textfeld eingegeben wird

Wenn ich die letzte Nummer eingebe, geht die erste Nummer in das text-boxFeld (sie verschwindet) und fügt ein zusätzliches Leerzeichen hinzu.

Nachdem ich außerhalb von geklickt text-boxhabe, sieht es gut aus, was ich beim Eingeben des letzten Zeichens brauche.

  #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" >

Helfen Sie mir, aus diesen Problemen herauszukommen. Vielen Dank

Fügen Sie Platz für eine andere Nummer hinzu und schneiden Sie die Eingabe mit ab 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">

Oder ohne Clip-Pfad durch Reduzieren der Hintergrundgröße:

#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">

Verwenden Sie diesen Code. Es ist schön zu arbeiten

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>

Versuchen Sie, dieses Skript unter dem Eingabefeld hinzuzufügen:

<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>

Dieser zwingt Ihren Eingabe-Cursor an den Anfang der Eingabe, nachdem das 6. Zeichen eingegeben wurde. Ich habe dem Feld auch eine Unschärfe () hinzugefügt, damit der Cursorsprung zum Anfang nicht hervorsteht.

Das Timeout wird ebenfalls benötigt. Ohne sie wird das eingegebene Zeichen am Anfang eingefügt. Weitere Informationen zum Timeout: Ist setTimeout eine gute Lösung, um asynchrone Funktionen mit Javascript auszuführen?

Sie können damit umgehen, indem Sie ein blur () -Ereignis von js onkeyup des Eingabefelds hinzufügen:

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/>

Bitte ändern Sie auf CSS unten (es wird funktionieren)

padding-left: 14px;

zu

padding-left: 5px;

Ich mag die Antwort von Temani Afif über die Verwendung der Schnittmaske. Ich finde es großartig. Ich wollte eine andere Lösung vorschlagen (etwas weniger elegant). Ich habe Firefox auch verwendet, um dieses Problem zu testen. Wenn Sie außerhalb des Textbereichs klicken (Fokus verlieren), wird die erste Ziffer nicht wieder angezeigt oder die Zeichenfolge wird in der Texteingabe dort wieder normal.

Ich glaube, das Problem ist das von Ihnen festgelegte CSS-Attribut für den Buchstabenabstand: letter-spacing: 31px;und die Tatsache, dass dies meiner Meinung nach für das "blinkende" Caret gelten würde, das die meisten Browser haben. Bei Verwendung von Chrome scheint dies zu entfernen, wenn der Fokus verloren geht, während Firefox dies auch nach einem Fokusverlust beibehält.

Die erste Lösung bestand darin, die Funktion blur () manuell aufzurufen, damit die Eingabe den Fokus verliert. Dies funktioniert in Chrome (mithilfe einer selbstausführenden anonymen Funktion):

<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" >

oder sogar als definierte Funktion, die von der Eingabe number_text wie folgt aufgerufen wird:

<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()" ... >

Sie werden eine leichte Verzögerung in Chrome bemerken, aber wenn Sie dies in Firefox aufrufen, wird das Problem nicht behoben.

Wir können im Wesentlichen dasselbe Verhalten in Firefox erzwingen. Nach einigem Herumspielen stellte ich fest, dass Chrome den Buchstabenabstand auf einer Unschärfe aktualisiert / neu berechnet. Meine Spielsitzung hat gezeigt, dass Sie Firefox zwingen können, diesen Wert programmgesteuert neu zu berechnen:

1. Ändern Sie den Inline-Stil des Buchstabenabstandsattributs der Eingabe in einen anderen Wert (da wir eine CSS-Klasse von number_text nicht ohne großen Aufwand programmgesteuert bearbeiten können, z. B. das gesamte Stil-Tag im Stilabschnitt eines Dokuments neu schreiben).
2. Entfernen Sie die Klasse number_text aus der Eingabe.
   • 1 und 2 sind austauschbar. Sie benötigen Firefox, um nur auf den von Ihnen festgelegten Inline-Stil zurückzugreifen, ohne dass die Klassenattribute "im Speicher" gespeichert werden.
3. Entfernen Sie den Inline-Stil und wenden Sie die CSS-Klasse number_text erneut an. Dadurch wird der Browser gezwungen, die Buchstabentrennung nach Bedarf neu zu berechnen.

Im Code würde es wie folgt aussehen: JavaScript-Funktion:

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
        }
    }

In Firefox flackert es genauso wie in Chrome, und alles wird gut.

Hinweis : Die Timeout-Funktionen dienen dazu, dem Browser Zeit zum Aktualisieren zu geben und tatsächlich das zu aktualisieren, was wir benötigen.

Hinweis : Sie können wählen, ob Sie in der Funktion .blur () aufrufen möchten, damit das Textfeld den Fokus verliert, oder dass Sie dies weglassen. Sie befinden sich weiterhin im Eingabefeld, ohne dass der Fehler mit den Ziffern auftritt.

Ich hoffe, dies hilft Ihrem konzeptionellen Verständnis und löst das Problem. Einige andere Personen gaben gute Lösungen, die das ganze Flimmern vermeiden und sowohl in Firefox als auch in Chrome funktionieren!

Es sieht aus wie ein häufiges Problem mit der Benutzeroberfläche, auf das ich zuvor gestoßen bin.

Ich wette, es schlägt auch nur auf einigen Plattformen fehl (dies liegt in der Natur dieses speziellen Fehlers.)

Auf einigen, aber nicht allen Plattformen wird ein Abstandzeichen verwendet, um das Caret anzuzeigen.

Auf einigen, aber nicht allen Plattformen ist dieses Zeichen nicht räumlich, sondern überlagert das nächste, nicht das letzte Zeichen. Wenn also kein nächstes Zeichen vorhanden ist, wird es mit dem Leerzeichen gefüllt, bis die Eingabe abgeschlossen ist.

In beiden Fällen funktioniert die Anzeige auf diese Weise.

Dies ist ein Fall, in dem die beste Lösung die einfachste Lösung ist, die dieser allgemeinen System-Eigenart Rechnung trägt, und nicht die Lösung, die sie dazu zwingt, sich so zu verhalten, wie Sie es möchten, wie einige Leute vorgeschlagen haben. Dies führt weniger zu Fehlern und funktioniert eher auf allen Plattformen.

Die Lösung besteht darin, am Ende des Eintrags etwas Platz für die Anzeige zu lassen.

Erhöhen Sie die " Breite " auf 230 oder 240 und Sie sollten gut sein.

Darüber hinaus können Sie nicht standardmäßige Systeme, insbesondere Eingabehilfesysteme mit alternativen Schriftarten oder Größenattributen, noch besser berücksichtigen, indem Sie einfach die Breite ermitteln, indem Sie Leerzeichen in voller Breite in den Bereich eingeben, am Ende einen viertel Breitengrad hinzufügen, diese messen und dann löschen oder einfach manipulieren, um die Leerzeichen in voller Breite zu überschreiben, während der Benutzer tippt (oder auf andere Weise Daten eingibt, nehmen Sie nicht an, dass es sich um eine Tastatur handelt oder sogar um etwas, das jeweils ein Zeichen eingibt).