El primer número entra cuando escribe el último número en el cuadro de texto

Cuando escribo el último número , el primer número va dentro de text-box(desaparece), agrega un espacio adicional.

Después de hacer clic fuera, text-boxse ve bien, lo que necesito al escribir el último carácter.

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

Ayúdame a salir de estos problemas. Gracias

Agregue espacio para otro número y recorte la entrada 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 sin clip-path reduciendo el tamaño del fondo:

#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 este código. es un buen trabajo

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>

Intente agregar este script debajo del campo de entrada:

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

Éste fuerza su cursor de entrada al comienzo de la entrada después de ingresar el sexto carácter. También agregué un desenfoque () al campo para que el salto del cursor al principio no sobresalga.

El tiempo de espera también es necesario. Sin él, el carácter introducido se insertará al principio. Más acerca del tiempo de espera: ¿es setTimeout una buena solución para hacer funciones asíncronas con javascript?

Puede tratarlo agregando un evento blur () de js onkeyup del cuadro de entrada:

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

Por favor, cambie en CSS a continuación (funcionará)

padding-left: 14px;

a

padding-left: 5px;

Entonces me gusta la respuesta de Temani Afif sobre el uso de la máscara de recorte. Piensa que es genial. Quería proponer otra solución (un poco menos elegante). También utilicé Firefox para probar este problema, y ​​al hacer clic fuera del área de texto (perder el foco) no vuelve a aparecer el primer dígito o la cadena vuelve a la normalidad en la entrada de texto allí.

Creo que el problema es el atributo css de espaciado de letras que establece:letter-spacing: 31px; y el hecho de que creo que esto se aplicaría al intermitente "parpadeante" que tienen la mayoría de los navegadores. Al usar Chrome, parece eliminar esto cuando pierde el foco, mientras que Firefox lo retiene incluso después de perder el foco.

La primera solución fue utilizar manualmente la función blur () para hacer que la entrada pierda el foco. Esto funciona en Chrome (usando una función anónima autoejecutable):

<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 incluso como una función definida llamada por la entrada number_text así:

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

Notarás un ligero retraso en Chrome, pero llamar a esto en Firefox no resolverá el problema.

Básicamente, podemos forzar este mismo comportamiento en Firefox. Después de jugar un poco, me di cuenta de que Chrome estaba actualizando / volviendo a calcular el espacio entre letras en un desenfoque. Mi sesión de juego mostró que podrías forzar a Firefox a recalcular este valor mediante programación:

1. Cambie el estilo en línea del atributo de espacio entre letras de la entrada a un valor diferente (ya que no podemos editar una clase CSS de number_text mediante programación sin mucho esfuerzo, como volver a escribir la etiqueta de estilo completa en la sección de estilo de un documento).
2. Elimine la clase number_text de la entrada.
   • 1 y 2 son intercambiables, necesita que Firefox recurra solo al estilo en línea que configuró, sin tener los atributos de clase guardados 'en memoria'.
3. Elimine el estilo en línea y vuelva a aplicar la clase CSS number_text. Esto obligará al navegador a volver a calcular la separación de letras según lo necesitemos.

En código, se vería como la siguiente función de 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
        }
    }

Tendrá el mismo parpadeo en Firefox que con Chrome, y todo estará bien.

Nota : Las funciones de tiempo de espera son para darle tiempo al navegador para actualizarse y, de hecho, actualizar lo que necesitamos.

Nota : Puede elegir llamar a .blur () en la función para hacer que el cuadro de texto pierda el foco u omitirlo y seguirán en el campo de entrada sin el error con los dígitos.

Espero que esto ayude a su comprensión conceptual, así como a resolver el problema. ¡Algunas otras personas dieron buenas soluciones que evitan todo el parpadeo y funcionan tanto en Firefox como en Chrome!

Parece un problema de interfaz de usuario común que he encontrado antes.

Apuesto a que solo falla en algunas plataformas también (esta es la naturaleza de este error en particular).

En algunas plataformas, pero no en todas, se utiliza un carácter de espaciado para indicar el cursor.

En algunas plataformas, pero no en todas, este personaje no es espaciado, sino que se superpone, en el siguiente, no en el último. Por lo tanto, si no hay un siguiente carácter, se rellenará con el espacio hasta que se realice la entrada.

En ambos casos, la pantalla actuará de esta manera.

Este es un caso en el que la mejor solución es la solución más simple, que se adapta a este capricho común del sistema, no la solución que lo obliga a comportarse de la manera que usted desea, como sugirieron algunas personas. Es menos probable que presente errores y es más probable que funcione en todas las plataformas.

La solución es dar un poco de espacio libre al final de la entrada para mostrar esto.

Aumente el " ancho " a 230 o 240 y debería ser bueno.

Además, podría acomodar aún mejor los sistemas no estándar, especialmente los sistemas de accesibilidad con fuentes o atributos de tamaño alternativos, simplemente detectando el ancho al ingresar espacios de ancho completo en el área, agregando un cuarto de ancho al final, midiéndolos y luego eliminándolos ellos, o simplemente manipulándolo para sobrescribir los espacios de ancho completo a medida que el usuario escribe (o de lo contrario ingresa datos, no suponga que es un teclado o incluso algo que ingresa un carácter a la vez).